[Dashboard] move onramp countries page #7262
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces a new Onramp Countries dashboard page, enabling users to select an onramp provider and view supported countries and currencies. It adds new React components for provider selection and country display, TypeScript types for country data structures, and a utility for fetching provider-specific country support data. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OnrampCountriesPage
participant ProviderSelector
participant CountriesTable
participant getOnrampCountrySupport
User->>OnrampCountriesPage: Accesses page with optional provider param
OnrampCountriesPage->>ProviderSelector: Renders with activeProvider
OnrampCountriesPage->>CountriesTable: Renders with provider
CountriesTable->>getOnrampCountrySupport: Fetch supported countries for provider
getOnrampCountrySupport-->>CountriesTable: Return country/currency data
CountriesTable-->>OnrampCountriesPage: Rendered table
ProviderSelector->>OnrampCountriesPage: (On provider change) triggers navigation/update
Suggested labels
Suggested reviewers
✨ 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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7262 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58680 58680
Branches 4157 4157
=======================================
Hits 32610 32610
Misses 25963 25963
Partials 107 107
🚀 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: 3
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx (2)
10-10: Consider using absolute imports for better maintainability.The relative import path
../../../../utilsis quite long and prone to breaking when files are moved. Consider using an absolute import path.-import { getOnrampCountrySupport } from "../../../../utils"; +import { getOnrampCountrySupport } from "@/app/(app)/(dashboard)/(bridge)/utils";
31-38: Add fallback for empty countries list.Consider handling the case where no countries are returned for a provider.
<TableBody> + {countries.length === 0 ? ( + <TableRow> + <TableCell colSpan={2} className="text-center text-muted-foreground py-8"> + No countries found for {props.provider} + </TableCell> + </TableRow> + ) : ( {countries.map((country) => ( <TableRow key={country.code} className="hover:bg-accent/50"> <TableCell className="font-medium">{country.name}</TableCell> <TableCell className="text-muted-foreground"> {country.currencies.join(", ")} </TableCell> </TableRow> ))} + )} </TableBody>apps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.ts (1)
14-17: Strongly-typedOnrampCountrySupportunion
Using a string-literal union forproviderenforces valid values at compile time. If these provider identifiers are used elsewhere, you might consider extracting them into a shared enum or constant map to avoid duplication.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/page.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.ts(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx (3)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsx (1)
OnrampProvider(8-8)apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (1)
getOnrampCountrySupport(72-92)apps/portal/src/components/ui/table.tsx (7)
TableContainer(151-151)Table(143-143)TableHeader(144-144)TableRow(148-148)TableHead(147-147)TableBody(145-145)TableCell(149-149)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (2)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST(24-25)apps/dashboard/src/@/constants/server-envs.ts (1)
DASHBOARD_THIRDWEB_SECRET_KEY(8-9)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.ts (1)
72-92: LGTM! Well-implemented utility function.The implementation follows excellent patterns:
- Proper error handling with descriptive error messages
- Appropriate caching strategy (1 hour revalidation)
- Type safety with imported type assertion
- Consistent with existing
getRoutesfunction patterns- Secure authentication with secret key headers
The function correctly constructs the URL, handles the provider parameter, and returns properly typed data.
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/page.tsx (2)
11-18: LGTM! Excellent metadata setup.The metadata configuration is comprehensive with proper title, description, and Open Graph tags for social sharing. This will improve SEO and user experience when the page is shared.
27-46: Well-structured responsive layout.The component layout is well-organized with:
- Responsive flexbox design that adapts to different screen sizes
- Proper spacing and typography hierarchy
- Clean separation between header controls and data display
- Good accessibility with semantic header structure
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsx (3)
17-24: Excellent URL manipulation with proper optimization.The
createPageURLfunction is well-implemented with:
- Proper handling of existing search parameters
- Correct use of
useCallbackfor performance optimization- Type-safe provider parameter handling
- Clean URLSearchParams manipulation
28-42: Clean provider selection UI implementation.The provider selection UI is well-crafted with:
- Dynamic styling based on active state (default vs outline variants)
- Proper key assignment for React list rendering
- Accessible button interactions with router navigation
- Consistent capitalization styling
- Good responsive flex layout
8-8:✅ Verification successful
Verify type consistency across the codebase.
The
OnrampProvidertype definition should be consistent with the provider parameter types used in the utility function.Let me verify that this type matches the usage in the utils function:
🏁 Script executed:
#!/bin/bash # Description: Verify OnrampProvider type consistency across files echo "Checking OnrampProvider type definitions and usage..." # Find all OnrampProvider type definitions rg "OnrampProvider.*=" -A 1 # Find all provider parameter type definitions in functions rg "provider.*stripe.*coinbase.*transak" -A 1Length of output: 2227
OnrampProvider type consistency verified
The
OnrampProviderunion ("stripe" | "coinbase" | "transak") is used identically in:
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsxapps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.tsapps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.tsNo discrepancies found—no changes required.
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.ts (2)
1-5: Well-definedOnrampCountryTokentype
TheOnrampCountryTokeninterface correctly captureschainId,address, andsymbol. This will ensure downstream code can safely rely on these fields.
7-12: ClearOnrampCountryDetailsstructure
This type cleanly models a country’s code, name, supported currencies, and associated tokens. It aligns well with the shape of the API responses and will make the table rendering straightforward.
| export async function CountriesTable(props: { provider: OnrampProvider }) { | ||
| const data = await getOnrampCountrySupport(props.provider); | ||
| const countries = data.supportedCountries; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for the async data fetching.
The component directly awaits getOnrampCountrySupport without error handling. If the API call fails, this will cause the entire page to error.
Consider wrapping the data fetching in a try-catch block or creating an error boundary:
export async function CountriesTable(props: { provider: OnrampProvider }) {
+ try {
const data = await getOnrampCountrySupport(props.provider);
const countries = data.supportedCountries;
+ } catch (error) {
+ return (
+ <div className="flex items-center justify-center p-8">
+ <p className="text-muted-foreground">
+ Failed to load country data for {props.provider}
+ </p>
+ </div>
+ );
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export async function CountriesTable(props: { provider: OnrampProvider }) { | |
| const data = await getOnrampCountrySupport(props.provider); | |
| const countries = data.supportedCountries; | |
| export async function CountriesTable(props: { provider: OnrampProvider }) { | |
| try { | |
| const data = await getOnrampCountrySupport(props.provider); | |
| const countries = data.supportedCountries; | |
| } catch (error) { | |
| return ( | |
| <div className="flex items-center justify-center p-8"> | |
| <p className="text-muted-foreground"> | |
| Failed to load country data for {props.provider} | |
| </p> | |
| </div> | |
| ); | |
| } | |
| // ...rest of the component using `countries` | |
| } |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx
around lines 13 to 15, the async call to getOnrampCountrySupport lacks error
handling, which can cause the entire page to crash if the API call fails. Wrap
the await call in a try-catch block to catch any errors during data fetching,
and handle the error gracefully, such as by logging the error and returning
fallback UI or empty data to prevent the page from breaking.
|
|
||
| export async function CountriesTable(props: { provider: OnrampProvider }) { | ||
| const data = await getOnrampCountrySupport(props.provider); | ||
| const countries = data.supportedCountries; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Validate data structure before accessing properties.
The code assumes data.supportedCountries exists without validation. This could cause runtime errors if the API response structure changes.
Add validation for the data structure:
const data = await getOnrampCountrySupport(props.provider);
- const countries = data.supportedCountries;
+ const countries = data.supportedCountries || [];
+
+ if (!Array.isArray(countries)) {
+ console.warn('Invalid country data structure received:', data);
+ return (
+ <div className="flex items-center justify-center p-8">
+ <p className="text-muted-foreground">Invalid country data format</p>
+ </div>
+ );
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const countries = data.supportedCountries; | |
| const data = await getOnrampCountrySupport(props.provider); | |
| const countries = data.supportedCountries || []; | |
| if (!Array.isArray(countries)) { | |
| console.warn('Invalid country data structure received:', data); | |
| return ( | |
| <div className="flex items-center justify-center p-8"> | |
| <p className="text-muted-foreground">Invalid country data format</p> | |
| </div> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx
at line 15, the code accesses data.supportedCountries without checking if data
is defined or if supportedCountries exists. To fix this, add validation to
ensure data is not null or undefined and that supportedCountries is a valid
array before accessing it. Use conditional checks or optional chaining to safely
access supportedCountries and handle cases where the data structure might differ
or be missing.
| const searchParams = await props.searchParams; | ||
| const activeProvider: OnrampProvider = | ||
| (searchParams.provider as OnrampProvider) || "coinbase"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add type safety for search params provider validation.
The type assertion (searchParams.provider as OnrampProvider) doesn't validate if the provider is actually a valid OnrampProvider value. Invalid values could cause issues downstream.
Add validation for the provider parameter:
const searchParams = await props.searchParams;
- const activeProvider: OnrampProvider =
- (searchParams.provider as OnrampProvider) || "coinbase";
+ const validProviders: OnrampProvider[] = ["stripe", "coinbase", "transak"];
+ const activeProvider: OnrampProvider =
+ validProviders.includes(searchParams.provider as OnrampProvider)
+ ? (searchParams.provider as OnrampProvider)
+ : "coinbase";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const searchParams = await props.searchParams; | |
| const activeProvider: OnrampProvider = | |
| (searchParams.provider as OnrampProvider) || "coinbase"; | |
| const searchParams = await props.searchParams; | |
| const validProviders: OnrampProvider[] = ["stripe", "coinbase", "transak"]; | |
| const activeProvider: OnrampProvider = | |
| validProviders.includes(searchParams.provider as OnrampProvider) | |
| ? (searchParams.provider as OnrampProvider) | |
| : "coinbase"; |
🤖 Prompt for AI Agents
In apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/page.tsx
around lines 23 to 25, the code uses a type assertion for searchParams.provider
without validating if it is a valid OnrampProvider, which risks invalid values
causing issues. To fix this, implement a validation step that checks if
searchParams.provider is one of the allowed OnrampProvider values before
assigning it to activeProvider. If it is invalid or missing, default to
"coinbase". This ensures type safety and prevents invalid provider values from
propagating.
size-limit report 📦
|
Summary
Testing
pnpm biome check --apply apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/page.tsx apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/server/countries-table.tsx apps/dashboard/src/app/(app)/(dashboard)/(bridge)/onramp/countries/components/client/provider.tsx apps/dashboard/src/app/(app)/(dashboard)/(bridge)/types/onramp-country.ts apps/dashboard/src/app/(app)/(dashboard)/(bridge)/utils.tspnpm test -r(fails: spawn anvil ENOENT)https://chatgpt.com/codex/tasks/task_b_683f13becfd483268bf07f6d964ccaf2
PR-Codex overview
This PR introduces types and components for managing onramp country support in a dashboard application. It adds functionality to fetch and display supported countries and currencies based on selected providers.
Detailed summary
OnrampCountryToken,OnrampCountryDetails,OnrampCountrySupport.getOnrampCountrySupportfunction to fetch country data.ProviderSelectorcomponent for selecting onramp providers.CountriesTablecomponent to display countries and currencies.OnrampCountriesPageto integrate new components and display data.Summary by CodeRabbit