feat: add wallet reconnect retry action in disconnect banner (Issue #…#201
Conversation
|
@godamongstmen897 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
There was a problem hiding this comment.
Pull request overview
This PR enhances the disconnected-wallet banner by adding an explicit “Reconnect Wallet” retry action that attempts a wagmi reconnection first and falls back to a fresh connect, with user feedback surfaced via toast notifications.
Changes:
- Added reconnect + fallback connect logic using
useAccount,useReconnect, anduseConnect. - Replaced
ConnectWalletButtonwith a custom reconnect button and toast-based status/error messaging.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { useState } from 'react'; | ||
| import { Wallet } from 'lucide-react'; | ||
| import { useAccount, useConnect, useReconnect } from 'wagmi'; | ||
| import { cn } from '@/lib/utils'; | ||
| import ConnectWalletButton from '@/components/common/ConnectWalletButton'; | ||
| import showToast from '@/utils/toast.util'; |
There was a problem hiding this comment.
ConnectWalletButton was removed from this banner, and a repo-wide search shows it’s no longer imported anywhere. To avoid dead/unused UI code drifting out of sync, consider deleting src/components/common/ConnectWalletButton.tsx (or reusing it here) so there’s a single, maintained wallet connect entry point.
| const handleReconnect = async () => { | ||
| if (isReconnecting) { | ||
| return; | ||
| } | ||
|
|
There was a problem hiding this comment.
This introduces non-trivial reconnect + fallback-connect behavior (and user feedback via toasts) but there are no component tests covering it. Since the repo already uses Vitest/Testing Library for common components, add tests that mock wagmi hooks to assert: (1) clicking disables the button / shows “Reconnecting…”, (2) successful reconnectAsync triggers the success toast, and (3) failed reconnect falls back to connectAsync (or surfaces an error toast).
This pull request updates the
WalletConnectCalloutBannercomponent to improve the wallet connection and reconnection experience. The changes introduce a new reconnection flow with user feedback, replacing the previous wallet connect button with a custom reconnect button that provides clearer status updates and error handling.Wallet connection and reconnection improvements:
wagmihooks (useAccount,useConnect,useReconnect), including asynchronous reconnection attempts and fallback to connecting if reconnection fails. User feedback is provided via toast notifications for success, loading, and error states. [1] [2]ConnectWalletButtonwith a custom "Reconnect Wallet" button that is disabled during reconnection and displays appropriate text based on the connection state.Closes #158