diff --git a/components/WalletConnectButton.tsx b/components/WalletConnectButton.tsx index ff6f6e4..b8c5b16 100644 --- a/components/WalletConnectButton.tsx +++ b/components/WalletConnectButton.tsx @@ -1,25 +1,61 @@ "use client"; -import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit"; +import { ConnectButton, useCurrentAccount, useDisconnectWallet } from "@mysten/dapp-kit"; +import { useState, useCallback } from "react"; export function WalletConnectButton() { const account = useCurrentAccount(); + const { mutate: disconnect } = useDisconnectWallet(); + const [isMenuOpen, setIsMenuOpen] = useState(false); - // Format address: 0x1234...5678 const formatAddress = (address: string) => { return `${address.slice(0, 6)}...${address.slice(-4)}`; }; + const handleDisconnect = useCallback(() => { + // Clear session storage to fix redirect_uri mismatch on re-login + sessionStorage.clear(); + disconnect(); + setIsMenuOpen(false); + }, [disconnect]); + return ( - - {account && ( -
- - account_balance_wallet - - {formatAddress(account.address)} +
+ + {account && ( + + )} + + + {/* Dropdown menu */} + {isMenuOpen && account && ( +
+
)} - + + {/* Click outside to close */} + {isMenuOpen && ( +
setIsMenuOpen(false)} + /> + )} +
); }