Stuck on reconnecting when changing routes

[L-TheG]

Hey all,

Solution (by @tmm ):

Make sure that the creation of the client is done outside of the MyApp() component

Problem

I am using the MetaMask connector and the connecting does work fine. When I change routes though (like from '/index' to 'index/coolpage') it seems like the connection between MetaMask and the site is lost.

The status of useConnect is stuck in the reconnecting state. I don't know if I should just call the connect() function whenever it is in the reconnect state. It feels wrong though since it might lead to users getting the 'Connect to Metamask?' popup without explicitly prompting it, which would be bad UX.
After reloading the page, it does however recognise that the dapp is connected to MetaMask.

So I am hoping there is a way to somehow persist connection status between pages.

I feel like this could have something to do with using the 'autoConnect' option in the client but I am not sure how that would effect that.

Any help would be appreciated :)

[tmm]

What bundler/framework are you using (e.g. Next.js, Remix)? Some code to look at would be great too :)

[L-TheG]

Hi thanks for your reply!

I am using Next.js.
For the connection page I am pretty much using the code from the Next.js example from this repo.
I am only using the MetaMask connector for now.
In the first component where I initially connect the Wallet, the code looks something like this:

function Dashboard(){
    const {isConnected} = useConnect();
    const {data} = useAccount();

    if (!isConnected) {
        return <ConnectScreen />;
    }
    if (data.address !== requiredAddress && isConnected) {
        return <DashboardElements/>
    }
}

This works perfectly well.
The when I click in the NavBar of my App, the route changes from '/dashboard' to '/usecase/usecase1'.
This component works very similarly:

function UseCase1(){
    const {isConnected} = useConnect();

    if (!isConnected) {
        return <ConnectScreen />;
    }

    if (externalData1.valid) {
        return <UseCaseElement1/>
    }

    if (externalData2.valid) {
        return <UseCaseElement2/>
    }
   ...... few more cases
}

Do you see anything wrong with this? Could it be the way my routes are organised?

Edit: _app.tsx

function MyApp({Component, pageProps}: AppProps) {
   // Used for local development on Hardhat
    const ethProvider = new providers.JsonRpcProvider(
            process.env.RPC_URL,
            providers.getNetwork(process.env.CHAIN_ID)
        );

    const connector = new MetaMaskConnector({chains: [chain.hardhat]});

    const client = createClient({
        autoConnect: true,
        provider: ethProvider,
        connectors: [connector],
    });
   return (
        <....>
            <....>
                <WagmiProvider client={client}>
                    <AnotherProvider1>
                        <AnotherProvider2>
                            <Header />
                            <Component {...pageProps}></Component>
                        </AnotherProvider1>
                    </AnotherProvider2>
                </WagmiProvider>
            <..../>
        <..../>
    )
}

Solution (by @tmm ):

Make sure that the creation of the client is done outside of the MyApp() component

[tmm]

What does your _app.tsx file look like? Where are you creating the wagmi client (e.g. createClient)?

[L-TheG]

Yes sorry forgot that one. I edited my previous comment to include the _app.tsx

[tmm]

Hoist createClient out of MyApp and you should be good! (You could also memoize it with React.useMemo.)

[L-TheG]

Thank you so much!