V2 Wagmi / Viem

[0xbid]

What problem does this new feature solve?

Compatibility with Wagmi and Viem V2, both of which updates recently.

Describe the solution you'd like

Update to use V2.

[jacek0x]

Yeah, seems like the standard command isn't working with NPM anymore:

npm install @web3modal/wagmi wagmi@1.4.13 viem@1.21.4.

I had to use --legacy-peer-deps to install it properly. It would be great if the modal could integrate smoothly with Wagmi v2.

[glitch-txs]

this was fixed on the latest version so there's no need for the legacy tag anymore, we'll launch Wagmi v2 support this week :)

[jacek0x]

this was fixed on the latest version so there's no need for the legacy tag anymore, we'll launch Wagmi v2 support this week :)

Awesome!

[Taosome]

this was fixed on the latest version so there's no need for the legacy tag anymore, we'll launch Wagmi v2 support this week :)

Thank you for your hard work. When will it be released? I'm very anxious to refactor my code with wagmi V2.

[rhlsthrm]

we'll launch Wagmi v2 support this week :)

Did this happen? @glitch-txs

[0xbid]

we'll launch Wagmi v2 support this week :)

Did this happen? @glitch-txs

Judging from #1588 it looks like they are ready to merge. Hoping a release to NPM can be initiated immediately after.

[vinaykharayat]

Docs need to be updated as well.

[glitch-txs]

Hi guys, we've released an alpha version, please test and give us feedback, sorry for the delay. https://docs.walletconnect.com/web3modal/react/about?platform=wagmi

Be aware there's currently an issue with the cookies features that's on wagmi's side, you can still use the default storage + the ssr flag as true for SSR metaframeworks like Next.js

[0xbid]

Hi guys, we've released an alpha version, please test and give us feedback, sorry for the delay. https://docs.walletconnect.com/web3modal/react/about?platform=wagmi

Be aware there's currently an issue with the cookies features that's on wagmi's side, you can still use the default storage + the ssr flag as true for SSR metaframeworks like Next.js

Will do, thanks so much! -- npm install will update to the version that has commit?

[glitch-txs]

you need also tanstack

npm install @web3modal/wagmi@4.0.0-alpha.0 wagmi@latest viem@latest @tanstack/react-query

you can also refer to Wagmi's migration guide here: https://wagmi.sh/react/guides/migrate-from-v1-to-v2

[glitch-txs]

update: cookies issue fixed https://github.com/wevm/wagmi/pull/3476#event-11520276425

[0xbid]

Hey @glitch-txs I have having a little trouble finding what the new Wagmi / Web3 Provider is supposed to look like. I think this:

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
import { http, createConfig, WagmiProvider } from 'wagmi';
import { goerli, holesky, mainnet, sepolia } from 'wagmi/chains';

type Web3ProviderType = {
    children: React.ReactNode;
};

const chains = [mainnet, goerli, sepolia, holesky];
const projectId = process.env.NEXT_PUBLIC_W3C_PID;

const queryClient = new QueryClient();

const config = createConfig({
    chains: [mainnet, goerli, sepolia, holesky],
    transports: {
        [mainnet.id]: http(),
        [goerli.id]: http(),
        [sepolia.id]: http(),
        [holesky.id]: http()
    }
});

const metadata = {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
};

const defaultConfig = defaultWagmiConfig({ chains, projectId, metadata });
createWeb3Modal({ wagmiConfig: defaultConfig, projectId, chains });

const Web3Provider = ({ children }: Web3ProviderType) => {
    return (
        <>
            <WagmiProvider config={config}>
                <QueryClientProvider client={queryClient}> {children}</QueryClientProvider>
            </WagmiProvider>
        </>
    );
};

is close but this doesn't meet what is expected for chains / the arguments for defaultWagmiConfig / createWeb3Modal. Do you know what I need to change?

[glitch-txs]

There's a typescript issue with chains and metadata, you can ignore them for now, we're fixing it in the next patch 👌

[Jouzep]

Hello i got a probleme with the installation The installation stuck every time. using --legacy-peer-deps fixed the installation but this issue is not solved

[socheatleang]

Hi @glitch-txs

How about @web3modal/wagmi-react-native? Is there any place that said it upgrade to support wagmi@2 and viem@2?