feat(ui): add wallet connect button to header and expose wallet state#75
Merged
mikewheeleer merged 2 commits intoJun 2, 2026
Merged
Conversation
- Added WalletContext to manage wallet connection state - Created WalletConnectButton component with connect, disconnect, and copy functionality - Integrated WalletConnectButton into layout.tsx header - Updated ActionPanel to gate milestone, dispute, and release funds actions based on wallet state - Added tests for WalletConnectButton covering connected, disconnected, and error states - Added documentation for WalletConnectButton Closes Talenttrust#45
- Replaced missing AlertCircle icon with an inline SVG in WalletConnectButton - Added a global mock for WalletContext in jest.setup.js to resolve 'useWallet must be used within a WalletProvider' errors in existing test suites
|
@kitWarse 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR introduces a global wallet connection affordance to the TalentTrust frontend:
WalletProvider– React context that manages wallet connection state (address,isConnecting,error) and providesconnect/disconnectactions.WalletConnectButton– Header component that:src/lib/truncateAddress.ts) with a copy‑to‑clipboard button once connected.src/app/layout.tsxto wrap the app inWalletProviderand renderWalletConnectButtonin a sticky header.Submit Milestone,Release Funds,Dispute) now disable when the wallet is not connected, with an inline hint prompting the user to connect.WalletConnectButtoncovering connection states, copy functionality, and error handling.jest.setup.jswith a global mock forWalletContext, ensuring existing tests continue to pass.docs/components/WalletConnectButton.mddetailing usage, props, and accessibility notes.ActionPanelto use the new wallet context mock.Why
TalentTrust escrow actions (milestones, payouts, disputes) require a connected wallet, but the existing UI lacked a global wallet UI. This change provides a clear, accessible entry point for users to connect/disconnect their wallet and ensures that contract‑related actions respect the connection state.
Screenshots
(Add screenshots of the header with “Connect Wallet” and the connected state, and the disabled ActionPanel buttons.)
Checklist
useWallethook.npm test→ 68 passing).npm run lint).feature/wallet-connect-headerbranch.Related Issue
Closes #45 – “Add Connect Wallet control to the app header.”
Additional Notes
lucide-react).