Wallet integration issue for my Web3 chatting app

[loveinkey]

I am facing some difficulties to integrate wagmi + rainbowkit to my next app, and faceing invalid wagmi/connector issue.
and this is my code for wagmiProvider

import { createConfig as createWagmiConfig, WagmiProvider, http } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()


export const WalletProvider: React.FC<PropsWithChildren> = ({ children }) => {

  const config = createWagmiConfig({
    chains: [...networks],
    ssr: true,
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http(),
    },
  })

  return (
    <WagmiContext.Provider value={{ connect }}>
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </WagmiProvider>
    <WagmiContext.Provider>
  )
}

Above is my code snippet and I need some guidance

[modelalchemist]

The issues you're experiencing could indeed be related to the Wagmi version you're using and how you're implementing it in a server-side rendering (SSR) environment.

1. The version of Wagmi you're using can significantly impact your application's behavior, especially when it comes to SSR compatibility. Here are some key points to consider:
2. Wagmi v2 has introduced major changes in its core APIs to better integrate with Viem and TanStack Query1.
3. If you're using an older version of Wagmi, you might encounter issues with SSR, particularly in Next.js applications.

SSR Considerations
When using Wagmi in an SSR environment like Next.js, there are some important factors to keep in mind:

1. Wagmi uses client-side storage (e.g., localStorage) to provide fast initial data, which can cause conflicts with SSR frameworks7.
2. To address SSR-related issues, Wagmi introduced the ssr property in its configuration

[loveinkey]

I am using with client side and v2, and it was working for my previous app. So weird

[venuswhispers]

Hello, 0x001828
Seems to be createConfig initialization issue, and how to use networks in your project?

[loveinkey]

Because i derive chains from networks, which come from an API call i am using networks inside component and using some hooks to get it

[venuswhispers]

Maybe, it can make issues because wagmi can try initialize configuration provider before chain list would init.
So you need to use static chain list, and have to defind config outside of component.
Its the standard wagmi provider initialization method.

[loveinkey]

Oh, got your point, and will try once again

[hcrypto7]

I think it due to the bad configuration. Please share the config also. thank you.

[loveinkey]

Thanks, @venuswhispers
I tried according to your guide and it is working well.
Thanks a lot.