feat: Add Transaction History feature to wallet extension #45
Conversation
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
Implements comprehensive transaction history page with the following features: **Core Functionality:** - Transaction list with GraphQL integration (Subsquid Reef Explorer API) - Pagination support (load more transactions) - Transaction details modal with full information - Refresh functionality - Separate incoming/outgoing transaction display **UI/UX:** - Loading states with skeleton placeholders - Error handling with retry capability - Empty states for no transactions - Dark mode support - Responsive design - Click-to-view transaction details **Technical Implementation:** - Custom React hook (useTransactionHistory) for data fetching - GraphQL queries for transfers and extrinsics - Integration with existing ReefSigners context - TypeScript throughout - Follows existing codebase patterns **Files Added:** - src/popup/History/TransactionHistory.tsx - Main component - src/popup/History/TransactionItem.tsx - Transaction list item - src/popup/History/TransactionDetails.tsx - Details modal - src/popup/History/useTransactionHistory.ts - Custom hook - src/popup/History/queries.ts - GraphQL queries **Files Modified:** - src/popup/popup.tsx - Added route and navigation button - tsconfig.json - Build configuration adjustments **Navigation:** - Added "History" button to main menu - Route: /history This addresses the critical missing feature identified in the codebase analysis. Transaction history is essential for any modern wallet application. 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Implements comprehensive transaction history page with the following features:
Core Functionality:
UI/UX:
Technical Implementation:
Files Added:
Files Modified:
Navigation:
Summary
This PR implements a comprehensive Transaction History feature for the Reef wallet extension, addressing a critical missing functionality identified in the codebase analysis.
Features Implemented
Core Functionality
UI/UX
Technical Implementation
New Files Added
src/popup/History/TransactionHistory.tsx- Main component (254 lines)src/popup/History/TransactionItem.tsx- Transaction list item component (153 lines)src/popup/History/TransactionDetails.tsx- Details modal (241 lines)src/popup/History/useTransactionHistory.ts- Custom React hook (94 lines)src/popup/History/queries.ts- GraphQL queries and API calls (178 lines)Files Modified
src/popup/popup.tsx- Added/historyroute and navigation buttontsconfig.json- Build configuration adjustments for compatibilityArchitecture
useTransactionHistoryfor data fetching and state managementReefSignerscontext for account dataAPI Integration
https://squid.subsquid.io/reef-explorer/graphqlhttps://squid.subsquid.io/reef-explorer-testnet/graphqlTesting Status
Screenshots
(Would be great to add after testing)
Why This Matters
Every modern cryptocurrency wallet includes transaction history as a fundamental feature. Users need to:
This feature brings the Reef wallet extension up to industry standards.
Review Checklist
Notes
Pre-existing Build Issues: The repository has TypeScript compilation errors in existing files (
Injected.ts,ReefProvider.ts,ReefSigner.ts,popup.tsx,Extrinsic.tsx) due to dependency version conflicts between@reef-chain/evm-providerpackages. These are not caused by this PR - all Transaction History code compiles without errors.