11'use client' ;
22
3- import { useState } from 'react' ;
3+ import { useState , useEffect , useCallback } from 'react' ;
44import { useWalletContext } from '@/context/WalletContext' ;
55import { useDebounce } from '@/hooks/useDebounce' ;
66import { shortenAddress } from '@/lib/format' ;
@@ -9,6 +9,8 @@ import { shortenAddress } from '@/lib/format';
99 * that resolves faster than this never flashes a loading state at all. */
1010const CONNECTING_INDICATOR_DELAY_MS = 200 ;
1111
12+ const DISMISS_TIMEOUT_MS = 5000 ;
13+
1214interface WalletButtonProps {
1315 className ?: string ;
1416}
@@ -18,6 +20,14 @@ export function WalletButton({ className }: WalletButtonProps) {
1820 const [ confirmDisconnect , setConfirmDisconnect ] = useState ( false ) ;
1921 const showConnecting = useDebounce ( connecting , CONNECTING_INDICATOR_DELAY_MS ) && connecting ;
2022
23+ const dismiss = useCallback ( ( ) => setConfirmDisconnect ( false ) , [ ] ) ;
24+
25+ useEffect ( ( ) => {
26+ if ( ! confirmDisconnect ) return ;
27+ const timer = setTimeout ( dismiss , DISMISS_TIMEOUT_MS ) ;
28+ return ( ) => clearTimeout ( timer ) ;
29+ } , [ confirmDisconnect , dismiss ] ) ;
30+
2131 if ( connected && address ) {
2232 return (
2333 < div className = { `flex items-center gap-2 ${ className ?? '' } ` } >
@@ -36,7 +46,7 @@ export function WalletButton({ className }: WalletButtonProps) {
3646 Sure?
3747 </ button >
3848 < button
39- onClick = { ( ) => setConfirmDisconnect ( false ) }
49+ onClick = { dismiss }
4050 className = "rounded-full border border-white/10 px-3 py-1.5 text-xs text-gray-400 hover:border-white/20 hover:text-white transition-all"
4151 >
4252 Cancel
0 commit comments