fix: implement real wallet connection and address display functionality

[JamesVictor-O]

🔧 Fix Wallet Connection and Address Display Issues

🎯 Overview

This PR addresses critical issues with the wallet connection functionality and address display in the ShadowChat application. The changes implement proper Starknet wallet integration, replace mock implementations with real functionality, and improve the overall user experience.

�� Issues Fixed

Primary Issues:

• Mock Wallet Connection: Wallet connect buttons were using alert() calls instead of actual wallet connection logic
• Hardcoded Address Display: Wallet card was showing a hardcoded address instead of the actual connected wallet address
• State Management: Wallet connection state was not properly managed across page navigations
• Missing Error Handling: No proper error handling for connection failures or user rejections

Secondary Issues:

• Poor User Feedback: No toast notifications for connection status
• Address Display: Long wallet addresses were not truncated for better UI
• Missing Functionality: No copy-to-clipboard feature for wallet addresses

�� Changes Made

Core Wallet Integration (src/components/WalletConnectButtons.tsx)

• ✅ Replaced mock alert() calls with actual useConnect() from @starknet-react/core
• ✅ Added proper error handling with specific error messages
• ✅ Implemented toast notifications for connection feedback
• ✅ Added wallet availability detection

Wallet Modal Improvements (src/components/WalletModal.tsx)

• ✅ Enhanced error handling with specific messages for:
  • User rejection/cancellation
  • Wallet not found/not installed
  • Network errors and timeouts
  • Message port closed errors (with retry mechanism)
• ✅ Added connection timeout (30 seconds)
• ✅ Implemented wallet availability detection
• ✅ Improved toast notifications and user feedback

Wallet Card Refactor (src/components/anonymous-profile/wallet-card.tsx)

• ✅ Replaced hardcoded address with useAccount() hook
• ✅ Implemented truncateAddress() function for better UI display
• ✅ Added copy-to-clipboard functionality
• ✅ Integrated useDisconnect() for proper wallet disconnection
• ✅ Removed local state management in favor of global wallet state
• ✅ Added proper conditional rendering based on connection status

Testing

Manual Testing Completed:

• ✅ Wallet connection with ArgentX and Braavos
• ✅ Connection persistence across page navigations
• ✅ Proper error handling for various failure scenarios
• ✅ Address truncation and copy functionality
• ✅ Wallet disconnection functionality
• ✅ Toast notifications for user feedback

Evidence

�� Files Changed

• src/components/WalletConnectButtons.tsx - Core wallet connection logic
• src/components/WalletModal.tsx - Enhanced error handling and user feedback

---

Closes: #128
Type: Bug fix and feature enhancement
Breaking Changes: None

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shadow-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2025 2:54pm

[SudiptaPaul-31]

@JamesVictor-O Please resolve the merge conflicts and also there are CI test failing

[JamesVictor-O]

@SudiptaPaul-31 conflixts has been resolved, while the cil test failng is from the contract folder, and i did not work on the contract folder