[Dashboard] Feature: Update payment success copy on payment page #7936
Conversation
🦋 Changeset detectedLatest commit: c55b29b The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds Rainbow wallet to the CheckoutWidget wallets. Adds an optional boolean prop Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant BO as BridgeOrchestrator
participant SS as SuccessScreen
Note right of BO #DDEBF7: computes flag from paymentLinkId
BO->>SS: render SuccessScreen({ hasPaymentId: !!paymentLinkId, uiOptions, ... })
alt hasPaymentId == true
SS->>SS: show "You can now close this page and return to the application."
SS-->>BO: no action button rendered
else hasPaymentId == false
alt uiOptions.mode == "transaction"
SS->>SS: show "Click continue to execute your transaction."
SS-->>BO: render action button (continue)
else
SS->>SS: show "Your payment has been completed successfully."
SS-->>BO: render action button (prior label logic)
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 📜 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 due to trivial 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). (6)
✨ 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. |
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
🧹 Nitpick comments (4)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (2)
129-134: Guard against hiding “Continue” copy in transaction modeIf
hasPaymentIdis accidentally set during"transaction"flows, the message changes and the action button (below) is hidden, potentially blocking progression. Make the payment-ID override apply only when not in"transaction"mode.Apply:
- {hasPaymentId - ? "You can now close this page and return to the application." - : uiOptions.mode === "transaction" - ? "Click continue to execute your transaction." - : "Your payment has been completed successfully."} + {hasPaymentId && uiOptions.mode !== "transaction" + ? "You can now close this page and return to the application." + : uiOptions.mode === "transaction" + ? "Click continue to execute your transaction." + : "Your payment has been completed successfully."}
148-152: Don’t hide the primary action in transaction modeMirror the copy logic so the button is only hidden when
hasPaymentIdand not in"transaction"mode.Apply:
- {!hasPaymentId && ( + {!(hasPaymentId && uiOptions.mode !== "transaction") && ( <Button fullWidth onClick={onDone} variant="accent"> {uiOptions.mode === "transaction" ? "Continue" : "Done"} </Button> )}packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (1)
392-393: PasshasPaymentIdonly for non-transaction flowsPrevents hiding the “Continue” action in transaction mode if a
paymentLinkIdis present by mistake.Apply:
- hasPaymentId={!!paymentLinkId} + hasPaymentId={!!paymentLinkId && uiOptions.mode !== "transaction"}packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (1)
226-238: Align the PaymentId story with actual pay-link usageUsing
TRANSACTION_UI_OPTIONSwithhasPaymentId: truehides the primary action and may confuse readers. Use a fund/direct payment UI option and document the behavior.Apply:
export const PaymentId: Story = { args: { client: storyClient, completedStatuses: mockBuyCompletedStatuses, hasPaymentId: true, preparedQuote: simpleBuyQuote, theme: "light", - uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction, + uiOptions: FUND_WALLET_UI_OPTIONS.ethDefault, }, parameters: { - backgrounds: { default: "light" }, + backgrounds: { default: "light" }, + docs: { + description: { + story: + "Pay-link behavior (hasPaymentId=true): shows close-page message and hides the Continue/Done button.", + }, + }, }, };
📜 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 (4)
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx(4 hunks)packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/pay/components/client/PayPageWidget.client.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.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/pay/components/client/PayPageWidget.client.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.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/pay/components/client/PayPageWidget.client.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (2)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
simpleBuyQuote(248-308)TRANSACTION_UI_OPTIONS(830-867)
⏰ 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). (2)
- GitHub Check: Size
- GitHub Check: Unit Tests
🔇 Additional comments (2)
apps/dashboard/src/app/pay/components/client/PayPageWidget.client.tsx (1)
63-65: Confirmed Rainbow wallet slug
The identifier"me.rainbow"is indeed the correct slug to use with thirdweb’screateWallet()for Rainbow Wallet. (portal.thirdweb.com, docs-v2.thirdweb-preview.com)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
46-50: Prop addition and default look goodOptional
hasPaymentIdwith a default preserves backward compatibility.Also applies to: 61-62
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #7936 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58592 58600 +8
Branches 4143 4141 -2
=======================================
+ Hits 33126 33131 +5
- Misses 25360 25363 +3
Partials 106 106
🚀 New features to boost your workflow:
|
gregfromstl
added
the
merge-queue
Merge activity
|
gregfromstl
deleted the
greg/mny-122-change-copy-of-payment-complete-when-using-payment-link
branch
graphite-app
bot
removed
the
merge-queue
PR-Codex overview
This PR focuses on enhancing the payment widget's user experience by incorporating a
hasPaymentIdfeature, which alters the success message and button visibility based on the presence of a payment ID.Detailed summary
hasPaymentIdprop toSuccessScreencomponent.hasPaymentId.SuccessScreen.PaymentIdinSuccessScreenstories.Summary by CodeRabbit
New Features
UI/Behavior
Documentation
Chores