useDisconnect hook not working
See original GitHub issueDescribe the bug useDisconnect hook resulting in the following error when called:
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:
- Call disconnect hook via onClick event
- Open console
- 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:
- Created a year ago
- Comments:9 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Will look into this, it has to be something to do with combination of hooks used together I think, ty for reporting this 👍
@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.