How to combine different public clients with useWagmiPlugin?

[dataexcess]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.7

Current Behavior

Hello!

I am using web3Modal as my connector inside the use-wagmi.ts plugin:

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { publicProvider } from 'use-wagmi/providers/public'
import { infuraProvider } from 'use-wagmi/providers/infura'
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 infuraKey = config.public.INFURA_API_KEY
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId }), infuraProvider({ apiKey: infuraKey }), publicProvider()]
    )

    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
        }
    }
})

The problem is that, using the web3modal connection, I cannot query any data from the blockchain before the user connects the wallet. The public client relies on the connection made by the wallet. But I want to be able to execute readContract before the user connects (to display all tokens of my nft collection...). How can I accomplish this? Do I need to make a separate publicClient (that simply uses Public or infura provider)? But how can I switch it sothat it uses the UseWagmiPlugin? What would you recommend?

Thank you for the help!

Expected Behavior

No response

Steps To Reproduce

No response

Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)

No response

Anything else?

No response

[unicape]

@dataexcess If you can suggest you implement your own useContractRead

[dataexcess]

Yes I can use a composable like this:

import { configureChains, mainnet, sepolia } from 'use-wagmi'
import { createPublicClient, http } from 'viem'
import { publicProvider } from 'use-wagmi/providers/public'
import { infuraProvider } from 'use-wagmi/providers/infura'

export const useBlockchain = () => {
    const runtimeConfig = useRuntimeConfig()
    const infuraKey = runtimeConfig.public.INFURA_API_KEY
    const chains = [mainnet, sepolia]

    const provider = configureChains(chains,
        [infuraProvider({ apiKey: infuraKey }), publicProvider()]
    )

    const client = createPublicClient({
        chain: sepolia,
        transport: http(`https://sepolia.infura.io/v3/${infuraKey}`)
    })

    return {
        client
    }
}

But it would be nice if use-wagmi or wagmi can select what publicClient to use for the usereadContracts.. but I think this is done 'behind-the-scenes' with the useWagmiPlugin... is there any way to specify the client used by a wagmi-hook?

[unicape]

@dataexcess useConfig is implemented using inject('USE-WAGMI') You can use provide to override it This will mean you have to listen to client changes yourself

[dataexcess]

Ok I fixed it by making a separate viem publicClient to fetch the data without user wallet connection.