Skip to content

clear session when log out #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tuanhqv123 merged 1 commit into from
Jan 17, 2026
Merged

clear session when log out #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 46 additions & 10 deletions components/WalletConnectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<ConnectButton connectText="Launch App" className="sui-wallet-button">
{account && (
<div className="bg-black dark:bg-white text-white dark:text-black px-5 rounded-full font-bold text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2">
<span className="material-icons text-base">
account_balance_wallet
</span>
<span>{formatAddress(account.address)}</span>
<div className="relative">
<ConnectButton connectText="Launch App" className="sui-wallet-button">
{account && (
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="bg-black dark:bg-white text-white dark:text-black px-5 py-2 rounded-full font-bold text-sm uppercase hover:scale-105 transition-transform flex items-center gap-2"
>
<span className="material-icons text-base">account_balance_wallet</span>
<span>{formatAddress(account.address)}</span>
<span className="material-icons text-sm">
{isMenuOpen ? "expand_less" : "expand_more"}
</span>
</button>
)}
</ConnectButton>

{/* Dropdown menu */}
{isMenuOpen && account && (
<div className="absolute right-0 top-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 min-w-[150px] z-50">
<button
onClick={handleDisconnect}
className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
>
<span className="material-icons text-sm">logout</span>
Disconnect
</button>
</div>
)}
</ConnectButton>

{/* Click outside to close */}
{isMenuOpen && (
<div
className="fixed inset-0 z-40"
onClick={() => setIsMenuOpen(false)}
/>
)}
</div>
);
}