feat(wallet): add infinite-scroll activity feed + integration test (#677) - #694
Merged
Chucks1093 merged 1 commit intoJul 28, 2026
Conversation
…yerorg#677) Adds the supporting infrastructure for a paginated wallet activity feed and the integration test that verifies it loads older trades as the user scrolls. * src/services/walletActivity.service.ts (NEW): exposes fetchWalletActivityPage so React Query useInfiniteQuery can fetch per-page activity for a wallet address; cacheManager-backed. * src/hooks/useWallet.ts (MODIFIED): useWalletActivity now uses useInfiniteQuery with initialPageParam=1 and getNextPageParam wired to lastPage.nextPage. Query key (queryKeys.wallet.activity(address)) is unchanged so the existing queryKeyIntegration.test.tsx continues to pass. * src/components/common/WalletActivityFeed.tsx (NEW): aggregates useInfiniteQuery pages, deduplicates trades by id, renders existing TransactionHistory with the accumulated list, and drives a sentinel via useInfiniteScroll to trigger fetchNextPage when the bottom of the feed scrolls into view. * src/components/common/__tests__/WalletActivityFeed.infiniteScroll. integration.test.tsx (NEW): four integration tests covering acceptance criteria - page 1 visible on initial load, scroll triggers next page fetch, page 2 appended below page 1, no duplicate trades when pages overlap.
|
@khaylebfortune 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! 🚀 |
4 tasks
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
2 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.
Summary
This PR addresses #677 ("Add integration test for the wallet activity feed loading the next page on scroll"). It introduces the supporting infrastructure for a paginated wallet activity feed and adds the integration test that exercises the full scroll-to-load-next-page flow.
What is new
src/services/walletActivity.service.ts(NEW): ExtendsBaseApiServiceand exposeswalletActivityServiceplus a thinfetchWalletActivityPage(address, page)wrapper. The wrapper exists so integration tests canvi.spyOn(...)it instead of mocking an axios client, and so the call site stays a plain(address, page)signature.src/components/common/WalletActivityFeed.tsx(NEW): Top-level component that wires the existinguseInfiniteScrollsentinel to the newuseInfiniteQuerydata layer. Aggregates the paginatedpagesarray, deduplicates trades byid(handles overlapping pages returned by a backend paginating by timestamp boundary), and renders the existingTransactionHistorywith the accumulated list.src/components/common/__tests__/WalletActivityFeed.infiniteScroll.integration.test.tsx(NEW): Four integration tests that mockIntersectionObserver(capturing callback so the test can drive intersections deterministically) andfetchWalletActivityPagewith deterministic two-page data. Each acceptance criterion is asserted by an actual reading of the rendered DOM or the spy call args - none of the assertions are stub-trivial.What is modified
src/hooks/useWallet.ts:useWalletActivityis refactored fromuseQuerytouseInfiniteQuerywithinitialPageParam: 1andgetNextPageParam: lastPage.nextPage. The query key (queryKeys.wallet.activity(address)) is unchanged, so the existingqueryKeyIntegration.test.tsxcontinues to assert the key correctly without modification.Acceptance criteria coverage
> renders page 1 trades on initial load- asserts@arivers,@schen_dev,@mthorneare present and D/E/F are absent, plusfetchSpycalled once with(address, 1).> fetches the next page when the sentinel scrolls into view- registers theMockIntersectionObserver, drives a singleisIntersecting: trueevent viaact(), and assertsfetchSpycalled a second time with(address, 2).> appends page 2 trades below page 1 trades after fetching- asserts all six testids are present and the DOM order reads[A, B, C, D, E, F]by iteratingcontainer.querySelectorAll(...).> does not render duplicate trade ids when paginated data overlaps- forces an overlap (page 2 repeatsC), then asserts each id appears exactly once viagetAllByTestId(...).toHaveLength(1)and that the total handle count is 6.Testing
pnpm lint- clean for all touched files (and full repo pass on touched paths)pnpm exec tsc -b- clean (no errors)pnpm vitest runon the new test, the existingqueryKeyIntegrationtest,TransactionHistory.creatorHandle.integrationtest, anduseInfiniteScrolltest - 16/16 pass(New test file:
src/components/common/__tests__/WalletActivityFeed.infiniteScroll.integration.test.tsx. Existing pre-existing failures inCreatorCard.accessibility,CopyField,Web3Provider, andlib/web3/format.test.tswere confirmed present ondevprior to this change and are unrelated to #677.)Checklist
closes #677