Dashboard: Various Asset page updates #7212
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes introduce structured analytics tracking for token-related actions, refactor tracking utility functions to accept parameter objects with error message support, and enhance error reporting in tracking events. UI improvements include a new success screen for token claims, improved price display, and removal of a "New" badge from the Engine sidebar link. Date parsing is made more robust for recent transfers. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ClaimTokenCardUI
participant Analytics
participant Blockchain
User->>ClaimTokenCardUI: Initiate token claim
ClaimTokenCardUI->>Analytics: trackAssetBuy(type: "attempt", metadata)
ClaimTokenCardUI->>Blockchain: approveAndClaim()
alt Approval or Claim fails
ClaimTokenCardUI->>Analytics: trackAssetBuy(type: "error", errorMessage, metadata)
ClaimTokenCardUI-->>User: Show error
else Success
ClaimTokenCardUI->>Analytics: trackAssetBuy(type: "success", metadata)
ClaimTokenCardUI-->>User: Show success screen with transaction info
end
sequenceDiagram
participant UI
participant TrackingUtils
UI->>TrackingUtils: getTokenDeploymentTrackingData({ type, chainId, errorMessage? })
TrackingUtils-->>UI: Return tracking data object (includes errorMessage if type is "error")
UI->>Analytics: Send tracking event with data
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7212 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 908 908
Lines 58546 58546
Branches 4128 4128
=======================================
Hits 32572 32572
Misses 25868 25868
Partials 106 106
🚀 New features to boost your workflow:
|
graphite-app
bot
changed the base branch from
05-28-_tool-4621_new_erc20_public_contract_page
to
graphite-base/7212
...ard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx
Show resolved
Hide resolved
size-limit report 📦
|
...[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
Outdated
Show resolved
Hide resolved
Merge activity
|
MananTank
force-pushed
the
05-30-dashboard_various_asset_page_updates
branch
from
8d5a160 to
28ab053
Compare
|
MananTank
force-pushed
the
05-30-dashboard_various_asset_page_updates
branch
from
28ab053 to
b1e46d4
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts (1)
26-52: Note: Discriminated union property naming inconsistency.The function implementation is correct and properly handles error message inclusion. However, there's a naming inconsistency where this function uses
statusfor the discriminated union property, whilegetTokenDeploymentTrackingDataandgetLaunchTrackingDatausetype. Consider standardizing the property name across all functions for better developer experience.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx(11 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx(6 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts (1)
getTokenDeploymentTrackingData(1-23)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts (1)
getLaunchTrackingData(55-84)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx (1)
110-119: LGTM! Excellent defensive programming for timestamp handling.This change ensures consistent UTC timezone interpretation for blockchain timestamps, preventing potential timezone-related display issues in the relative time formatting. The conditional logic properly handles both timestamped strings with and without the "Z" suffix.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx (1)
78-78: LGTM: Clean UI simplificationRemoving the "New" badge from the Engine link simplifies the sidebar interface. The change maintains all functionality while cleaning up the UI.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx (7)
3-4: LGTM: Well-organized imports for new functionalityThe additional imports support the new tracking, success screen, and enhanced UI features being introduced.
Also applies to: 10-10, 13-13, 29-33
58-58: LGTM: Clean state management for success flowThe
activeWallethook enables wallet ID tracking, and thesuccessScreenstate properly manages the post-purchase UI with transaction hash capture.Also applies to: 66-71
73-97: LGTM: Well-structured analytics tracking functionThe
trackAssetBuyfunction correctly implements the discriminated union pattern for tracking events with proper error message handling. The inclusion of contextual metadata (wallet ID, chain ID, account address) provides valuable analytics data.
114-116: LGTM: Comprehensive tracking throughout the purchase flowExcellent tracking implementation that captures all key events:
- Attempt tracking before starting the process
- Error tracking with detailed error messages on both approval and claim failures
- Success tracking with transition to success screen
This provides complete visibility into the purchase funnel.
Also applies to: 151-154, 186-189, 203-209
171-171: LGTM: Proper transaction receipt handlingReturning the awaited receipt enables the success screen to capture the transaction hash for display and blockchain explorer linking.
259-302: LGTM: Excellent success screen implementationThe success screen provides clear confirmation with:
- Visual success indicator
- Purchase details (quantity and token symbol)
- Transaction link to blockchain explorer
- "Buy More" option to reset the flow
This significantly improves the user experience after a successful purchase.
337-343: LGTM: Enhanced price display logicThe "FREE" display for zero-price tokens improves clarity for users. The logic correctly handles both per-token and total price calculations with proper conditional rendering.
Also applies to: 365-374
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx (3)
65-68: LGTM: Consistent tracking API refactoringThe refactoring from individual parameters to a parameter object with the
typeandchainIdproperties aligns with the new tracking API structure defined intracking.ts.Also applies to: 115-118
142-143: LGTM: Enhanced error tracking with explicit messagesExcellent improvement in error tracking by:
- Extracting error messages from caught exceptions when they are
Errorinstances- Providing "Unknown error" fallback for non-Error exceptions
- Including error messages in tracking data for better debugging
This enhancement significantly improves the quality of analytics data for troubleshooting failed operations.
Also applies to: 150-151, 215-216, 285-286, 384-385
147-152: LGTM: Proper error tracking with structured parametersThe deployment error tracking correctly uses the new parameter object format with
type: "error",chainId, anderrorMessageproperties, maintaining consistency with the refactored tracking API.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx (3)
49-67: LGTM: Well-structured tracking function refactoringThe
launchTrackingfunction correctly implements the discriminated union pattern with:
type: "attempt" | "success"for basic eventstype: "error"with requirederrorMessagefor error events- Proper parameter spreading to
getLaunchTrackingDataThis maintains type safety while enabling enhanced error reporting.
69-71: LGTM: Consistent tracking call updatesThe calls to
launchTrackingcorrectly use the new object parameter format for attempt and success events, maintaining consistency with the refactored API.Also applies to: 98-100
105-109: LGTM: Enhanced error tracking with message extractionThe error tracking properly:
- Uses the
type: "error"discriminated union- Extracts error messages from
Errorinstances- Provides "Unknown error" fallback for non-Error exceptions
This improvement enables better debugging and error analysis in the analytics data.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts (1)
55-84: LGTM! Well-implemented discriminated union with proper error handling.The function correctly implements discriminated union types and properly includes error messages in tracking data when errors occur. The type safety and conditional error message handling are well-structured.
.../dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
Show resolved
Hide resolved
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing tracking functionality and improving the UI components for better user feedback during token operations in the dashboard application.
### Detailed summary
- Updated `ProjectSidebarLayout.tsx` to simplify the `label` for the Engine section.
- Refactored date formatting in `RecentTransfers.tsx` for improved readability.
- Enhanced error handling and tracking in `launch-token.tsx`, `create-token-page-impl.tsx`, and `tracking.ts`.
- Improved tracking data structure by consolidating parameters in functions.
- Added success and error tracking in `ClaimTokenCardUI` for better user feedback during transactions.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a success screen after purchasing tokens, displaying confirmation details and options to view the transaction or buy more.
- Enhanced analytics tracking for token purchase and deployment flows, capturing more detailed error information and contextual metadata.
- **Bug Fixes**
- Improved timestamp handling for recent transfers to ensure consistent display of relative times.
- **Style**
- Updated the sidebar to remove the "New" badge from the "Engine" link.
- **Refactor**
- Streamlined analytics tracking functions to use structured parameter objects and improved error message handling.
- **Chores**
- Minor cleanup, including removal of unnecessary console logs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
05-30-dashboard_various_asset_page_updates
branch
from
b1e46d4 to
a1aba29
Compare
PR-Codex overview
This PR focuses on enhancing tracking functionality by refactoring tracking parameters and improving error handling in various components. It also simplifies the display of UI elements and adjusts the logic for handling timestamps.
Detailed summary
labelforEngineinProjectSidebarLayout.tsxto a string.RecentTransfers.tsx.launchTrackingfunction to accept a more structuredparamsobject inlaunch-token.tsx.CreateTokenAssetPagefor better error handling.tracking.ts.trackAssetBuyfunction to handle buy tracking inClaimTokenCardUI.tsx.ClaimTokenCardUI.tsxfor purchase confirmation.ClaimTokenCardUI.tsxto show "FREE" for zero prices.Summary by CodeRabbit
New Features
Bug Fixes
Style
Refactor
Chores