Dashboard: Create Payment link dialog fixes/ui tweaks #7908
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughExtracts dialog content from CreatePaymentLinkButton into a new internal CreatePaymentLinkDialogContent component, refactors UI and form layout, wires chain/token selectors with dependent resets, moves form state and validation into the inner component, and reimplements the create mutation with success/error handling and cache invalidation. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Button as CreatePaymentLinkButton
participant Dialog as Dialog
participant Content as CreatePaymentLinkDialogContent
participant Bridge as Bridge/TokenResolver
participant API as CreatePaymentLinkMutation
participant Toast as Toast
participant Cache as QueryClient
User->>Button: Click "Create payment link"
Button->>Dialog: Open
Dialog->>Content: Mount (init form)
User->>Content: Fill Title, Recipient, Chain, Token, Amount
Content->>Bridge: Fetch chains/tokens as needed
Note over Content,Bridge: Changing Chain resets tokenAddress
User->>Content: Submit
Content->>Content: Validate (zod)
Content->>Bridge: Resolve token & recipient checksum
Content->>API: mutationFn(payload)
alt Success
API-->>Content: Created link
Content->>Toast: Show success toast
Content->>Cache: Invalidate payment links
Content->>Dialog: Close
Content->>Content: Reset form
else Error
API-->>Content: Error
Content->>Toast: Show parsed error
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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 Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7908 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58592 58592
Branches 4143 4143
=======================================
Hits 33126 33126
Misses 25360 25360
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (1)
253-261: Enforce strictly positive amounts (schema + UI control)Payments with 0 or negative amounts should be rejected at both the UI and validation layers.
- UI: add a min constraint to the number input to prevent accidental negatives.
- Schema: ensure
amountis > 0 so API payloads are always valid.Apply this UI diff:
- <Input - className="w-full bg-card" - {...field} - placeholder="0.0" - required - step="any" - type="number" - /> + <Input + className="w-full bg-card" + {...field} + placeholder="0.0" + required + step="any" + min="0" + type="number" + />And update the schema accordingly (outside this range):
- amount: z.coerce.number(), + amount: z.coerce.number().gt(0, "Amount must be greater than 0"),Optional UX improvement: disable the “Create” button until the form is valid.
- const form = useForm<z.infer<typeof formSchema>>({ + const form = useForm<z.infer<typeof formSchema>>({ + mode: "onChange", defaultValues: { ... }, resolver: zodResolver(formSchema), });- disabled={createMutation.isPending} + disabled={createMutation.isPending || !form.formState.isValid}
🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (4)
85-91: Add a sensible staleTime for chains query (guideline: ≥ 60s)Bridge.chains is relatively static. Set a staleTime to reduce refetch churn and align with the app guidelines.
const chainsQuery = useQuery({ queryFn: async () => { return await Bridge.chains({ client }); }, queryKey: ["payments-chains"], + staleTime: 60_000, });
92-126: Defensive token metadata handling and consistent checksum usageTwo small hardening tweaks:
- Pass a checksummed address into getUniversalBridgeTokens for consistency.
- Fail fast if decimals are missing to avoid sending malformed units.
const createMutation = useMutation({ mutationFn: async (values: z.infer<typeof formSchema>) => { - const tokens = await getUniversalBridgeTokens({ - chainId: values.chainId, - address: values.tokenAddress, - }); + const tokens = await getUniversalBridgeTokens({ + chainId: values.chainId, + address: checksumAddress(values.tokenAddress), + }); const token = tokens[0]; if (!token) { throw new Error("Token not found"); } + if (token.decimals == null) { + throw new Error("Token metadata missing decimals"); + }
185-193: Remove redundant prop overrides on Input
{...field}already providesvalueandonChange. Overriding them is unnecessary and can cause confusion.- <Input - className="w-full bg-card" - {...field} - onChange={field.onChange} - value={field.value} - placeholder="Address or ENS" - required - /> + <Input + className="w-full bg-card" + placeholder="Address or ENS" + required + {...field} + />
206-214: Use watch() for chainId and gate token fetch with enabledRelying on
form.getValues()is fine, butwatch("chainId")is reactive and reads better. Also, pass anenabledflag to TokenSelector so its internal query can be skipped when chainId is falsy.Add a watcher after useForm:
const form = useForm<z.infer<typeof formSchema>>({ ... }); + const chainId = form.watch("chainId");Then wire it through:
- chainId={form.getValues().chainId} + chainId={chainId} - disabled={!form.getValues().chainId} + disabled={!chainId} + enabled={Boolean(chainId)} ... - chainId: form.getValues().chainId, + chainId,Also applies to: 227-241
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx(7 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
🧠 Learnings (3)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (3)
apps/dashboard/src/@/analytics/report.ts (1)
reportPaymentLinkCreated(433-438)apps/dashboard/src/@/components/blocks/TokenSelector.tsx (1)
TokenSelector(23-210)packages/thirdweb/src/react/web/ui/components/Spinner.tsx (1)
Spinner(11-34)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx (4)
52-64: Solid separation of concerns with an internal dialog content componentExtracting CreatePaymentLinkDialogContent and keeping CreatePaymentLinkButton slim makes the flow clearer and easier to test. Controlled Dialog state is also clean.
Also applies to: 66-71
268-282: Action bar UX looks goodClear pending state with icon swap, disabled submit during mutation, and consistent bg-card footer. Nice touch.
275-279: No changes needed for Spinner usageThe
Spinnercomponent in apps/dashboard/src/@/components/ui/Spinner/Spinner.tsx only accepts aclassNameprop (it does not support asizeprop). Your usage of<Spinner className="size-4" />is correct and will not cause any runtime styling mismatches.
202-214: I’ve kicked off a script to verify howdisableChainIdis defined and used in the dashboard’sSingleNetworkSelector. Once we see whether it truly prevents user interaction (and thusonChangefiring), we can confirm or update the suggestion.
Merge activity
|
<!--
## 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 updates the `CreatePaymentLinkButton` component to enhance its dialog interface and improve the overall user experience. It replaces the `LinkIcon` with a `PlusIcon`, refines form elements, and cleans up unused code.
### Detailed summary
- Replaced `LinkIcon` with `PlusIcon`.
- Updated dialog structure and content.
- Changed `RequiredFormLabel` to `FormLabel` for consistency.
- Improved styling by adding `bg-card` class to input fields.
- Removed commented-out code related to image upload functionality.
- Enhanced form layout and submission handling.
> ✨ 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
- **Refactor**
- Streamlined the payment link creation flow with a clearer dialog and improved form handling for a smoother experience.
- **Style**
- Updated to a plus icon, added a header with title and description, standardized labels, themed inputs, and introduced a bottom action bar.
- **Bug Fixes**
- Chain and token changes now properly reset related fields.
- Improved validation for recipient address and token selection.
- Added progress indicator during creation.
- Success toast and automatic refresh ensure newly created payment links appear immediately.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
08-26-dashboard_create_payment_link_dialog_fixes_ui_tweaks
branch
from
add90ba to
c6150be
Compare
graphite-app
bot
deleted the
08-26-dashboard_create_payment_link_dialog_fixes_ui_tweaks
branch
PR-Codex overview
This PR updates the
CreatePaymentLinkButtoncomponent to enhance its dialog functionality and user interface by replacing theLinkIconwith aPlusIcon, improving form structure, and cleaning up commented-out code.Detailed summary
LinkIconwithPlusIcon.DialogHeader,DialogDescription, andDialogContent.RequiredFormLabeltoFormLabelfor various fields.Summary by CodeRabbit
Refactor
Style
Bug Fixes