rainbowkit
rainbowkit copied to clipboard
rainbow-me
[bug] when disconnect，ConnectModal reopened
Is there an existing issue for this?
- [X] I have searched the existing issues
RainbowKit Version
0.5.0
wagmi Version
0.6.4
Current Behavior
when disconnect，ConnectModal reopened。
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useDisconnect, useConnect, useAccount } from "wagmi";
import style from "./index.module.less";
import { Dropdown, Button, Menu, Avatar } from "antd";
import Image from "next/image";
import { useState } from "react";
import icon_eth_grey from "~/images/icon_eth_grey.svg";
import icon_wallet from "~/images/icon_wallet.png";
import icon_copy from "~/images/icon_copy.svg";
import icon_disconnect from "~/images/icon_disconnect.svg";
import { DownOutlined } from "@ant-design/icons";
import { getAvatar, formateAddress, formatNumber } from "~/util";
interface IProps {}
const ConnectBtn = (props: IProps) => {
const { disconnect } = useDisconnect();
const [copied, setCopied] = useState(false);
const handleClear = () => {
disconnect();
};
const handleCopy = (address) => {
window.navigator.clipboard.writeText(address);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
};
const getMenu = (account: any) => (
<Menu
items={[
{
label: (
<div className={style.user_menu_money}>
<Image src={icon_eth_grey} />
<span className={style.user_menu_money_text}>
{formatNumber(Number(account.displayBalance.replace("ETH", "")), "0")}
</span>
</div>
),
key: "1",
},
{
label: (
<span style={{ width: "100px", display: "block" }} className={style.user_menu}>
{copied ? "Copied!" : "Copy Address"}
</span>
),
key: "2",
icon: (
<span>
<Image src={icon_copy} />
</span>
),
onClick: () => handleCopy(account.address),
},
{
label: (
<span style={{ width: "100px", display: "block" }} className={style.user_menu}>
Disconnect
</span>
),
key: "3",
icon: (
<span>
<Image src={icon_disconnect} />
</span>
),
onClick: handleClear,
},
]}
/>
);
return (
<ConnectButton.Custom>
{({ account, chain, openAccountModal, openChainModal, openConnectModal, authenticationStatus, mounted }) => {
const ready = mounted && authenticationStatus !== "loading";
const connected = ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated");
return (
<div
{...(!ready && {
"aria-hidden": true,
style: {
opacity: 0,
pointerEvents: "none",
userSelect: "none",
},
})}
>
{(() => {
if (!connected) {
return (
<span onClick={openConnectModal} className={style.wallet} id="loginBtn">
<Image src={icon_wallet} width={36} height={36} />
</span>
);
}
if (chain.unsupported) {
return "Wrong network";
}
return (
<span className={style.user}>
<Dropdown overlay={getMenu(account)} overlayClassName="nft-dropdown">
<Button>
<Avatar src={getAvatar(account.address)} size="small" />
<span className="ml-[6px]">{formateAddress(account.address)}</span>
<DownOutlined />
</Button>
</Dropdown>
</span>
);
})()}
</div>
);
}}
</ConnectButton.Custom>
);
};
export default ConnectBtn;
Expected Behavior
do not reopen
Steps To Reproduce
No response
Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)
No response
Anything else?
No response
+1, also facing this issue, would love a prop that let's you optionally define this behavior.
+1, I also have the same issue, and it seems completely random. On demo instances of rainbow kit it does not happen. I've tried paring down my code to the most basic implementation of RK but still it happens. I really can't understand why.
+1 I'm having the same issue. I've tried both the Custom ConnectButton and Modal Hooks
i had the same issue and manage to solve it by updating react from ^17.0.2 to the most recent
我有同样的问题，并设法通过将反应从 ^17.0.2 更新到最新的来解决它
I don't think it's a react version issue
I have the exact same issue. Right now fixed with resetting the RainbowKitProvider on disconnect:
const addressRef = useRef(address);
const [resetDate, setResetDate] = useState(0);
useEffect(() => {
if (!address && addressRef.current) {
setResetDate(new Date().getTime());
}
addressRef.current = address;
}, [address]);
...
return <RainbowKitProvider
key={`rainbowkit-${resetDate}`}
...
>
This is clearly a dirty hack and would love to understand why we have this issue
For @liushaozhen, @nmalzieu and anyone else. If updating your React version does not help, you might want to change your Wagmi version. I found the latest version of Wagmi causes the connect modal to automatically reopen on disconnect (and can not be closed). I changed the Wagmi version to exactly 0.6.8 (npm install --save --save-exact [email protected]) and this fixed the issue.
For @liushaozhen, @nmalzieu and anyone else. If updating your React version does not help, you might want to change your Wagmi version. I found the latest version of Wagmi causes the connect modal to automatically reopen on disconnect (and can not be closed). I changed the Wagmi version to exactly 0.6.8 (npm install --save --save-exact [email protected]) and this fixed the issue.
I was experiencing this same issue and can confirm that downgrading from [email protected] to [email protected] resolved it for me as well. The modal does not pop up on disconnect anymore.
Thank you for sharing @mobiman1!
