question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useDisconnect hook not working

See original GitHub issue

Describe the bug useDisconnect hook resulting in the following error when called:

Screen Shot 2022-10-15 at 11 36 38 AM

Other hooks like useConnectModal, useAccount, and useBalance working fine.

All implemented following the react examples with Next.js, sans TypeScript.

index.js

import {
  useConnectModal,
  useAccount,
  useBalance,
  useDisconnect,
} from "@web3modal/react";

export default function Home() {
  const { isOpen, open, close } = useConnectModal();
  const { address, isConnected } = useAccount();
  const disconnect = useDisconnect();
  const { data, error, isLoading, refetch } = useBalance({
    addressOrName: address,
    formatUnits: "ether",
  });

  return (
    <div>
      {!isConnected ? (
        <button onClick={open}>Connect</button>
      ) : (
        <button onClick={disconnect}>Disconnect</button>
      )}
      <p>
        Connected: <span>{isConnected ? "Yes" : "No"}</span>
      </p>
      {address && <p>{address}</p>}
      {data && <p>{`${data.symbol}: ${data.formatted}`}</p>}
    </div>
  );
}

_app.js

import { chains, providers } from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";

const config = {
  projectId: "process.env.NEXT_PUBLIC_PROJECT_ID",
  theme: "dark",
  accentColor: "default",
  ethereum: {
    appName: "web3Modal",
    autoConnect: false,
    chains: [chains.mainnet],
    providers: [
      providers.walletConnectProvider({
        projectId: "process.env.NEXT_PUBLIC_PROJECT_ID",
      }),
    ],
  },
};

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Web3Modal config={config} />
    </>
  );
}

SDK Version

  • Version ^2.0.0-alpha.7

To Reproduce Steps to reproduce the behavior:

  1. Call disconnect hook via onClick event
  2. Open console
  3. See error

Expected behavior Account to disconnect from network.

Desktop (please complete the following information):

  • macOS v12.6
  • Chrome v106.0.5249.119 (Official Build) (arm64)

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
0xAsimetriqcommented, Oct 15, 2022

Will look into this, it has to be something to do with combination of hooks used together I think, ty for reporting this 👍

0reactions
0xAsimetriqcommented, Dec 8, 2022

@adityapandey9 Thank you for the update, we actually changed everything up in a way where users can now provide their own wagmi configuration, including connectors (we only require WalletConnectConnector to be present in that case).

Our default connector selection only uses InjectedConnector and its available shims.

Read more comments on GitHub >

github_iconTop Results From Across the Web

useDisconnect() function | thirdweb developer portal
Once users disconnect their wallet, the useAddress , useChainId , useAccount , and useNetwork hooks will no longer return values until a user...
Read more >
wagmi-dev/wagmi: React Hooks for Ethereum - GitHub
20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc. ... import { useAccount, useConnect, useDisconnect } from 'wagmi' import ...
Read more >
Custom react hook not updating it's value - Stack Overflow
No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every...
Read more >
wagmi: React Hooks for Ethereum
wagmi is a collection of React Hooks containing everything you need to start working with Ethereum.
Read more >
Disconnect hooks, howto 'undo' connect hooks - Snapcraft forum
The problem. I'd like to discuss how to undo connect hooks (the first four hooks at the top) in case of failure. Currently,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found