[bug] useAccount onConnect onDisconnect

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.5.12 and 0.6.0

Current Behavior

Using this code:

    const accountInfo = useAccount({
      onConnect: ({ address, connector, isReconnected }) => {
        console.log('Connected', { address, connector, isReconnected })
      },
      onDisconnect: () => {
        console.log('Disconnected')
      },
     }
    )

I’m getting the “connected” and “disconnected” log randomly. I haven’t found a pattern. I can reload the web and works, and reload again and stops working.

Expected Behavior

Always trigger onConnect and onDisconnect

Steps To Reproduce

No response

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

No response

Anything else?

No response

[soccerarenadev]

NextJS Page (for instance index.tsx):

import { getCsrfToken, signIn, signOut, useSession } from "next-auth/react"
import { ConnectButton, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { useAccount, useBlockNumber, useConnect, useDisconnect, useNetwork, useSignMessage } from 'wagmi'



const MinimalError = () => {
    const { data: authjsSession, status: authjsStatus } = useSession();
    const signMessage = useSignMessage( )
    const { disconnect } = useDisconnect()
    const { chain: activeChain } = useNetwork()
    const accountInfo = useAccount({
      onConnect: ({ address, connector, isReconnected }) => {
        console.error('Connected', { address, connector, isReconnected })
      },
      onDisconnect: () => {
        console.error('Disconnected')
      },
     }
    )

  return ( <ConnectButton /> );
};

export default MinimalError;

_app.tsx:

import { appWithTranslation } from 'next-i18next';
import { AppProps } from 'next/app';

import { RainbowKitProvider, getDefaultWallets } from '@rainbow-me/rainbowkit';

import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import '@rainbow-me/rainbowkit/styles.css';
import { SessionProvider } from 'next-auth/react';

const { chains, provider, webSocketProvider } = configureChains(
  [
    chain.mainnet,
    chain.polygon,
  ],
  [
    alchemyProvider({
      // This is Alchemy's default API key.
      // You can get your own at https://dashboard.alchemyapi.io
      alchemyId: '_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC',
    }),
    publicProvider(),
  ]
);


const { connectors } = getDefaultWallets({
  appName: 'appname',
  chains,
});

const wagmiClient = createClient({
  autoConnect: false,
  connectors,
  provider,
  webSocketProvider,
});


const MyApp = ({ Component, pageProps }: AppProps) =>  {
  return (
    <WagmiConfig client={wagmiClient}>
      <SessionProvider session={pageProps.session} refetchInterval={0}>
        <RainbowKitProvider chains={chains}>
          <Component {...pageProps} />
        </RainbowKitProvider>
      </SessionProvider>
    </WagmiConfig>
  )
};

export default appWithTranslation(MyApp);

packages.json

{
  "name": "appname",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@rainbow-me/rainbowkit": "^0.4.4",
    "ag-psd": "^14.3.13",
    "classnames": "^2.3.1",
    "ethers": "^5.6.9",
    "file-saver": "^2.0.5",
    "framer-motion": "^6.5.1",
    "idb-keyval": "^6.0.3",
    "it-all": "^1.0.6",
    "next": "^12.2.3",
    "next-auth": "^4.10.2",
    "next-i18next": "^10.1.0",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.4.2",
    "react-modal": "^3.15.1",
    "react-virtuoso": "^2.16.1",
    "recoil": "^0.7.4",
    "recoil-persist": "^4.0.0",
    "siwe": "^1.1.6",
    "styled-jsx-plugin-postcss": "^4.0.1",
    "swr": "^1.3.0",
    "wagmi": "^0.5.12"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^11.1.2",
    "@types/file-saver": "^2.0.5",
    "@types/node": "^17.0.35",
    "@types/react": "^18.0.12",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.5",
    "@types/react-modal": "^3.13.1",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "autoprefixer": "^10.3.6",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^14.0.0",
    "eslint-config-next": "^12.1.6",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-unused-imports": "^1.1.5",
    "lint-staged": "^11.1.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.8",
    "prettier": "^2.4.1",
    "rimraf": "^3.0.2",
    "typescript": "^4.7.2"
  },
  "license": "ISC"
}

https://codesandbox.io/s/serverless-wildflower-oh45jm

[tmm]

@Quix44 this was fixed in wagmi@0.7.4.