[bug] useAccount onConnect onDisconnect

[soccerarenadev]

Is there an existing issue for this?

• [X] 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

[tmm]

Thanks for reporting. This issue is temporarily closed due to lack of information. Please provide a minimal reproducible example and reopen this issue.

[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

[wong2]

same here

[reecejohnson]

I'm also seeing the same issue.

The callbacks onConnect and onDisconnect are intermittently called.

[KristjanBajuk]

I have the same issue

[Quix44]

bump! also have this..

[tmm]

@Quix44 this was fixed in [email protected].

[NBMSacha]

Nope @tmm, still getting this issue with [email protected] :/

[github-actions[bot]]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.