[Dashboard] Add token request route to dashboard #7112
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
|
""" WalkthroughThis update introduces a new token route discovery workflow in the dashboard. It adds a reusable Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RouteDiscovery (Form)
participant API (addUniversalBridgeTokenRoute)
participant Analytics
participant Toast
User->>RouteDiscovery: Select network and enter token address
User->>RouteDiscovery: Submit form
RouteDiscovery->>API: addUniversalBridgeTokenRoute({chainId, tokenAddress})
API-->>RouteDiscovery: Success or Error response
alt Success
RouteDiscovery->>Analytics: Track success event
RouteDiscovery->>Toast: Show success message
RouteDiscovery-->>User: Show success UI, offer reset
else Error
RouteDiscovery->>Analytics: Track failure event
RouteDiscovery->>Toast: Show error message
RouteDiscovery-->>User: Show error UI, offer retry
end
Assessment against linked issues
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (5)
⏰ 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7112 +/- ##
=======================================
Coverage 55.66% 55.66%
=======================================
Files 904 904
Lines 58391 58391
Branches 4114 4114
=======================================
Hits 32504 32504
Misses 25781 25781
Partials 106 106
🚀 New features to boost your workflow:
|
![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 (9)
apps/dashboard/src/@/api/universal-bridge/addRoute.ts (1)
16-42: API function implementation is robust but could enhance error handling.The implementation correctly:
- Authenticates with the server
- Constructs the API URL and request body
- Handles basic error cases
- Parses and returns the response data with proper typing
Consider enhancing the error handling to provide more specific error messages based on HTTP status codes or response content structure.
if (!res.ok) { const text = await res.text(); - throw new Error(text); + let errorMessage = text; + try { + const errorJson = JSON.parse(text); + errorMessage = errorJson.message || errorJson.error || text; + } catch (e) { + // Use the original text if JSON parsing fails + } + throw new Error(`Failed to add token route: ${errorMessage}`); }apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx (1)
56-81: Well-implemented footer with multiple state handling.The footer section correctly handles different states:
- No permission message
- Error message
- Standard informational message
- Conditional rendering of the save button
- Loading state with spinner
However, consider adding an aria-label to the button when in loading state to improve accessibility.
<Button size="sm" className={cn("gap-2", props.saveButton.className)} onClick={props.saveButton.onClick} disabled={props.saveButton.disabled || props.saveButton.isPending} variant={props.saveButton.variant || "outline"} type={props.saveButton.type} + aria-label={props.saveButton.isPending ? "Submitting token request" : "Submit token request"} >apps/dashboard/src/components/pay/RouteDiscovery.tsx (7)
2-2: Remove the import adjustment comment.The comment "// Adjust the import path" appears to be a temporary note that should be removed before production.
-import { addUniversalBridgeTokenRoute } from "@/api/universal-bridge/addRoute"; // Adjust the import path +import { addUniversalBridgeTokenRoute } from "@/api/universal-bridge/addRoute";
53-70: Provide more specific error handling for the API call.The current error handling catches all errors and re-throws them. Consider adding more specific error handling based on different types of API errors (e.g., network errors, validation errors, authentication errors).
const submitDiscoveryMutation = useMutation({ mutationFn: async (values: { tokenAddress: string; }) => { try { // Call the API to add the route const result = await addUniversalBridgeTokenRoute({ chainId: selectedChainId, tokenAddress: values.tokenAddress, }); return result; } catch (error) { console.error("Error adding route:", error); + // More specific error handling based on error type + if (error.response?.status === 400) { + throw new Error("Invalid token address or chain ID"); + } else if (error.response?.status === 401 || error.response?.status === 403) { + throw new Error("Authentication error. Please log in again."); + } else if (error.response?.status >= 500) { + throw new Error("Server error. Please try again later."); + } throw error; // Re-throw to trigger onError handler } }, });
74-74: Remove console.log statement.Remove the debug console.log statement before production deployment.
- console.log("selectedChainId", selectedChainId);
83-83: Remove console.log statement.Remove the debug console.log statement before production deployment.
- console.log("Token route added successfully:", data);
115-115: Remove console.log statement from validation error handler.Remove the debug console.log statement before production deployment.
- console.log("Form validation errors:", errors);
122-137: Enhance accessibility of the success component.Add appropriate ARIA attributes to improve accessibility, and ensure color is not the only indicator of success.
- <div className="mt-4 rounded-md border border-green-200 bg-green-50 p-4"> + <div + className="mt-4 rounded-md border border-green-200 bg-green-50 p-4" + role="alert" + aria-live="polite" + > <h4 className="font-medium text-green-600 text-lg"> Token submitted successfully! </h4> <p className="mb-3 text-green-600"> Thank you for your submission. If you still do not see your token listed after some time, please reach out to our team for support. </p> <button type="button" onClick={resetForm} className="rounded-md border border-green-500 bg-green-100 px-4 py-2 text-green-700 transition-colors hover:bg-green-200" + aria-label="Submit another token" > Submit Another Token </button> </div>
142-157: Enhance accessibility of the failure component.Add appropriate ARIA attributes to improve accessibility, and ensure color is not the only indicator of failure.
- <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4"> + <div + className="mt-4 rounded-md border border-red-200 bg-red-50 p-4" + role="alert" + aria-live="assertive" + > <h4 className="font-medium text-lg text-red-600"> Token submission failed! </h4> <p className="mb-2 text-red-600"> Please double check the network and token address. If issues persist, please reach out to our support team. </p> <button type="button" onClick={resetForm} className="rounded-md border border-red-500 bg-red-100 px-4 py-2 text-red-700 transition-colors hover:bg-red-200" + aria-label="Try submitting again" > Try Again </button> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/@/api/universal-bridge/addRoute.ts(1 hunks)apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/settings/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx(0 hunks)apps/dashboard/src/components/pay/RouteDiscovery.tsx(1 hunks)apps/dashboard/src/components/settings/ApiKeys/validations.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/settings/page.tsx (2)
5-5: New component import looks good.The import for RouteDiscovery is correctly added and aligns with the existing import pattern.
52-63: Clean integration of the RouteDiscovery component.The modified component structure now properly organizes the page with:
- A flex column container for consistent layout
- Appropriate padding and spacing between components
- Well-structured component hierarchy
The RouteDiscovery component is correctly placed below the PayConfig section, matching the UI flow described in the PR objectives.
apps/dashboard/src/components/settings/ApiKeys/validations.ts (1)
126-137: Well-structured validation schema for token routes.The validation schema is properly implemented with:
- Correct validation for chainId as a number
- Proper tokenAddress validation with regex for Ethereum addresses
- Clear error messages for required fields and invalid formats
- Type export for use with TypeScript
This validation will ensure that only properly formatted token addresses are submitted, which is essential for the token request functionality.
apps/dashboard/src/@/api/universal-bridge/addRoute.ts (2)
1-6: Proper server-side implementation with environment configuration.The server action is correctly defined with the "use server" directive and imports the necessary authentication utilities. The base URL is appropriately sourced from environment constants.
7-14: Well-defined TokenMetadata type.The type definition is comprehensive and includes all necessary fields for token metadata with appropriate types. The optional iconUri field is correctly marked.
apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx (2)
6-31: Well-structured component props with comprehensive type definitions.The props interface is thorough and provides good flexibility for the component:
- Clear organization of related properties (header, saveButton)
- Proper typing for all properties
- Good use of optional props for conditional rendering
- Support for various button variants and states
This approach makes the component highly reusable across different contexts.
32-55: Clean implementation of the card header with conditional rendering.The header section is well-implemented with:
- Proper conditional rendering of title and description
- Good use of CSS utilities for styling
- Appropriate cursor handling for disabled state
- Clean rendering of children content
The component structure follows best practices for reusable UI components.
apps/dashboard/src/components/pay/RouteDiscovery.tsx (1)
1-236: Overall implementation looks good.The
RouteDiscoverycomponent is well-structured and implements the token request route functionality effectively. It provides clear user feedback, handles form validation, and integrates with the API and analytics tracking. The UI is responsive and provides appropriate error handling and success states.There are a few minor improvements suggested above, but the overall implementation is solid and aligns well with the PR objectives.
size-limit report 📦
|
| <p className="text-muted-foreground text-sm"> | ||
| {props.noPermissionText} | ||
| </p> | ||
| ) : props.errorText ? ( |
There was a problem hiding this comment.
Won't need these if you make the error and success messages toasts
There was a problem hiding this comment.
Updated to toasts .
There was a problem hiding this comment.
Is it pushed? Code looks the same
| > | ||
| {props.saveButton.isPending && <Spinner className="size-3" />} | ||
| {props.saveButton.label || | ||
| (props.saveButton.isPending ? "Submit" : "Submit Token")} |
There was a problem hiding this comment.
Submit vs Submit Token? Is there any difference?
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/settings/page.tsx (1)
52-64: Simplify the layout structure and verify RouteDiscovery props.The integration looks good overall, but consider these improvements:
Unnecessary wrapper: The inner flex div around RouteDiscovery (lines 60-62) seems redundant. You can apply the padding directly to the component.
Missing props verification: RouteDiscovery doesn't receive any props like
project,teamId, orteamSlug. Please verify this is intentional if the component is fully self-contained.Consider this simplified structure:
return ( <div className="flex flex-col p-5"> <PayConfig project={project} teamId={team.id} teamSlug={team_slug} fees={fees} /> - - <div className="flex pt-5"> - <RouteDiscovery /> - </div> + <RouteDiscovery className="pt-5" /> </div> );This assumes RouteDiscovery accepts a
classNameprop. If not, you could wrap it in a simpler div without the unnecessary flex class.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/settings/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/universal-bridge/settings/page.tsx (1)
5-5: LGTM: Clean import addition.The RouteDiscovery import follows the established pattern and is properly added alongside the existing PayConfig import.
gregfromstl
added
the
merge-queue
Merge activity
|
TOOL-4443
TOOL-4559
How to Test
1. Log into dashboard
2. Select a project
3. Click on Universal Bridge on left hand side
4. Click on Settings
5. Scroll down to add token section
- Failure input
Chain: Ethereum
Token Address: 0x7613c48e0cd50e42dd9bf0f6c235063145f6f8db
-Success input
Chain: Ethereum
Token Address:0x7613c48e0cd50e42dd9bf0f6c235063145f6f8dc
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces a new validation schema for route discovery, enhances the UI for token submission, and integrates a new `RouteDiscovery` component to facilitate token discovery in the dashboard.
### Detailed summary
- Added `routeDiscoveryValidationSchema` in `validations.ts` for validating token discovery inputs.
- Created `RouteDiscovery` component to handle token submission.
- Updated `page.tsx` to include `RouteDiscovery` below `PayConfig`.
- Implemented `addUniversalBridgeTokenRoute` function in `tokens.ts` for API token submission.
- Added `RouteDiscoveryCard` component for better UI presentation of token discovery.
> ✨ 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**
- Introduced a Route Discovery workflow, allowing users to submit tokens for route discovery on selected blockchain networks.
- Added a new card component for displaying route discovery information and actions.
- Integrated Route Discovery into the Universal Bridge settings page for easier access.
- **Enhancements**
- Added validation for token address and chain selection to ensure proper input.
- Provided user feedback through success and error messages, including toast notifications.
- **Style**
- Minor cleanup of extra blank lines in the Project General Settings page for improved readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
joe-UB-Route-Discovery
branch
from
80c28a4 to
e14a134
Compare
graphite-app
bot
removed
the
merge-queue
TOOL-4443
TOOL-4559
How to Test
Chain: Ethereum
Token Address: 0x7613c48e0cd50e42dd9bf0f6c235063145f6f8db
-Success input
Chain: Ethereum
Token Address:0x7613c48e0cd50e42dd9bf0f6c235063145f6f8dc
PR-Codex overview
This PR introduces a new validation schema for route discovery and integrates a
RouteDiscoverycomponent into the dashboard. It enhances the user interface for token submissions and adds functionality for adding universal bridge tokens.Detailed summary
routeDiscoveryValidationSchemainvalidations.ts.RouteDiscoverycomponent for token discovery.RouteDiscoveryinto thePagecomponent inpage.tsx.addUniversalBridgeTokenRoutefunction intokens.ts.RouteDiscoveryCardcomponent for UI representation.Summary by CodeRabbit
New Features
Enhancements
Style