feat: add optimistic UI update for buy transaction before on-chain confirmation (#571) - #613
Closed
Hollujay wants to merge 106 commits into
Closed
feat: add optimistic UI update for buy transaction before on-chain confirmation (#571)#613Hollujay wants to merge 106 commits into
Hollujay wants to merge 106 commits into
Conversation
- Rewrite .env.example with a one-line description for every variable and remove duplicate entries; group into required vs optional - Add an 'Environment variables' section to CONTRIBUTING.md covering required vs optional vars and where to source testnet RPC URLs
Verifies that the GitHub and Telegram community links render with the correct href values, open in a new tab, and carry the expected rel="noopener noreferrer" attribute so a future refactor cannot silently break these URLs. Closes accesslayerorg#428
…in XLM with correct decimal places
…on-test Add integration tests for MarketingPage community links
…-add-helper-for-formatting-key-price-display-in-xlm-with-correct-decimal-places feat: accesslayerorg#420 Add helper for formatting key price display in XLM with co…
- Add computePriceChange(current: bigint, previous: bigint) in src/utils/priceChange.utils.ts
- Returns { percent: number, direction: 'up' | 'down' | 'flat' }
- Returns flat when previous is zero or current equals previous
- 7 unit tests covering: price up, price down, no change, zero previous, both zero
Closes accesslayerorg#429
…rorg#444 accesslayerorg#445 - Add copy-to-clipboard button to ConnectWalletButton with 2s feedback and screen-reader announcement (accesslayerorg#442) - Add src/lib/queryKeys.ts factory-style React Query key constants with unit tests (accesslayerorg#443) - Add LandingPage.holdings.test.tsx integration tests asserting portfolio totals and per-holding values (accesslayerorg#444) - Add docs/api-layer.md documenting service conventions, error handling, and a worked end-to-end example (accesslayerorg#445)
…cesslayerorg#437 - Add ledgerToTimestamp helper for converting Stellar ledger sequence numbers to estimated timestamps - Add transaction status badge legend tooltip for user-friendly status explanations - Add creator card keyboard shortcut hint (press 'B' to quick buy) with desktop-only display - Add integration test for creator card price update on snapshot data change
…elper-tx-tooltip-keyboard-shortcut-price-test Add ledger timestamp helper, transaction status tooltip, keyboard shortcuts, and price update tests
…-address feat: add shortenAddress helper for wallet address display — Close accesslayerorg#423
Closes accesslayerorg#438 by formatting counts under 1K as plain strings and larger values with one-decimal K/M suffixes, with unit tests for each range and boundary values. Co-authored-by: Cursor <cursoragent@cursor.com>
Documents the standard pattern contributors should follow when writing new useQuery and useMutation hooks — covering the onError callback convention, when to show a toast vs inline error vs error boundary, how to distinguish 4xx client errors from 5xx server errors and network failures, and a worked example hook that handles all three cases. Closes accesslayerorg#460
…-holder-count Add formatHolderCount helper for compact holder display.
closes accesslayerorg#460 - docs: add error handling guide for React Query hooks
Closes accesslayerorg#424 Add a React error boundary scoped to creator detail pages so a render error shows a fallback UI instead of crashing the whole app to a blank screen. Follows the existing SectionErrorBoundary class pattern. - Fallback shows a short message and a "Back to creators" link (/creators) - Logs the error to console only in development (import.meta.env.DEV) - Add tests covering normal render, fallback on error, and the list link
…d layout - Add new CreatorCardSkeleton component that mirrors CreatorCard's dimensions (avatar, name + verified/change/supply/recent-activity badges, handle, bio, sparkline placeholder, 3 mini stat chips, 3 meta rows, social links, action row, helper text) so it acts as a layout-stable placeholder while the creator list is fetching. - Use the existing dark-theme .skeleton-shimmer animation and CREATOR_CARD_MEDIA_RADIUS_CLASS token so the skeleton visually matches the rest of the marketplace. - Respect prefers-reduced-motion via the shared CSS rule and a disableShimmer prop, matching CreatorSkeleton's API. - Add a CreatorCardGridSkeleton helper that defaults to count = 6 to satisfy the acceptance criterion. - Wire CreatorCardGridSkeleton into LandingPage's initial-loading branch so the marketplace shows 6 stable skeleton cards instead of the generic grid skeleton. - Cover the new component with vitest tests asserting role/aria coverage, 6-by-default grid, disableShimmer propagation, className merging, and shimmer-vs-static block toggling.
Closes accesslayerorg#426. Adds docs/adding-page-routes.md covering where routes are registered in src/App.tsx, the file naming convention for page components, the recommended pattern for auth-protected routes (with a RequireAuth wrapper example), and a four-step worked example adding a public AboutPage at /about. Adds a one-line pointer in CONTRIBUTING.md under Frontend conventions so contributors can find the guide.
…ice-change feat: add computePriceChange helper for key price percentage change
…imestamp-test test: add integration test for ledgerToTimestamp (accesslayerorg#461)
…rage-preferences feat: add generic localStorage preference helpers (accesslayerorg#458)
…-component Feat/error boundary component
…e-contributing-folder-structure docs: update CONTRIBUTING.md with folder structure and conventions
… utility function
Add integration test for clamp helper being applied to key amount input field
…on-test-for-isownwallet-edit-controls-533 feat: add integration tests for isOwnWallet and implement isOwnWallet…
Add helper for computing bonding curve price at any given supply step without mutating contract state
- Add isOwnWallet(address, connectedAddress) to walletConnection.utils.ts - Returns false when connectedAddress is null (wallet not connected) - Performs case-insensitive comparison for address matching - Add comprehensive unit tests covering all acceptance criteria: - Matching addresses return true - Non-matching addresses return false - Null connected address returns false - Case-insensitive comparison works correctly
…-wallet-utility Add isOwnWallet utility function with unit tests
Closes accesslayerorg#539 - HoldingsEmptyState: settled-empty only (skeleton while loading) - CTA to /creators; aria role=status - tests: empty settle + no flash during load
…oldings-empty-state feat(holdings): empty state UI when wallet has no creator keys
Issue 557: Add copy-to-clipboard button for creator Stellar address
- Add FEATURED_CREATOR_STELLAR_ADDRESS constant (demo Stellar public key)
- Add stellarAddressCopied state for 2-second Copied! feedback
- Add handleCopyStellarAddress using existing copyTextToClipboard util
- Render address row with truncated mono display and accessible copy button
- Button aria-label toggles between 'Copy Stellar address' and 'Stellar address copied'
Issue 556: Add structured debug log for React Query cache miss
- Import useQueryClient in useCreatorDetail
- Detect cache miss by checking queryClient.getQueryData before fetch
- Emit console.debug with { creator_id, cache_status: 'miss', duration_ms }
- Log is skipped in test environments (NODE_ENV === 'test')
Issue 555: Add unit tests for useFormatXlm hook
- Create src/hooks/useFormatXlm.ts with formatXlm() and useFormatXlm()
- 16 tests covering: default 2dp precision, decimal override (0 and 7),
thousands separator, zero input, large values without scientific notation,
and hook interface stability
Issue 554: Add T keyboard shortcut to open trade panel
- Add isTradeShortcut() helper (bare T, no modifiers)
- Stabilise openTradeDialog with useCallback
- Register keydown listener after openTradeDialog declaration to avoid
TS2448 'used before declaration' error
- Listener respects isEditableShortcutTarget() and cleans up on unmount
- Document shortcut in README.md
Misc: update .gitignore with __snapshots__, *.snap, coverage, .nyc_output,
Thumbs.db, and lock files from other package managers
feat: resolve issues 554-557
…helper feat: Add creator card subtitle clamp helper
…ering - Create PriceSparkline component rendering SVG path from dataPoints array - Handle 7, 1, and 0 data point edge cases safely - Apply emerald-400 line color when last value > first value - Co-locate tests following existing __tests__/ convention Closes accesslayerorg#572
…ice-sparkline test: add PriceSparkline component and unit tests for data point rendering
…-timing-logging Add Navigation Timing Performance Logging for Client-Side Route Loads
Add search input to creator discovery list with debounced query
…ies, and landing page updates
Feature:Implements four backend enhancements for the InsightArena platform:
Add optimistic update to immediately reflect pending purchases in the React Query holdings cache before on-chain confirmation. Changes: - Add field to interface - Create hook with onMutate/onError/onSuccess/onSettled lifecycle for optimistic cache updates and rollback - Wire buy flow in LandingPage to use the mutation - Show pending badge (spinner badge + muted opacity) on unconfirmed holdings - Merge cache data with local demo state for holdings display - Mock useWallet in affected test files to support new hook dependencies
✅ Deploy Preview for accesslayer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
👋 Hey @Hollujay, thanks for your contribution! This PR is targeting Please close this PR and reopen it with Closing this PR automatically. See you in |
|
@Hollujay 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
20 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
Implements an optimistic UI update pattern for buy transactions so holdings reflect immediately in the UI after a user submits a purchase, rather than waiting for on-chain confirmation. Closes #571.
Changes
src/utils/portfolioValue.utils.tspending?: booleanfield to theHeldKeyPositioninterface to support optimistic state tracking per holding entry.src/hooks/useWallet.tsTradeVariablesinterface for typed mutation input (creatorId,amount,priceStroops,price).useTradeMutation(address: string)hook using@tanstack/react-queryuseMutation:mutationFn: Simulates on-chain transaction (900ms delay placeholder, swappable for real contract call).onMutate: Cancels in-flight refetches, snapshots the previous holdings cache, then optimistically updates the cache with the new quantity andpending: true. If the creator is not yet held, a new entry is created.onError: Rolls back to the previous cache snapshot and displays error toast viagetSignatureErrorMessage.onSuccess: Removes thependingflag from the cache and shows a success toast with the amount.onSettled: Invalidates the holdings query to sync with server state after completion.<HeldKeyPosition[]>touseWalletHoldings.src/pages/LandingPage.tsxtradeMutation.mutateAsync(...)instead of local state simulation.heldKeyPositionsmemo merges React Query cache data (with pending state) with local demo holdings, falling back to local state when the cache is empty.opacity-60) whenpending: true.Test files (4 files)
vi.mock("@/hooks/useWallet")inLandingPage.holdings.test.tsx,LandingPage.holdingsCount.integration.test.tsx,LandingPage.holdingsEmptyState.test.tsx, andLandingPage.apiErrorToast.integration.test.tsxto provide mockuseTradeMutationanduseWalletHoldingssince these tests renderLandingPagewithout aQueryClientProvider.Acceptance Criteria
onMutate)onSettledinvalidates the query)onErrorrestores previous cache snapshot)Notes
mutationFncurrently uses a placeholder 900ms delay. Replace with the real contract interaction when available.