support form changes #8414
support form changes #8414
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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. |
WalkthroughRemoved Contracts and Payments support forms; updated SupportTicketForm product options and labels; refactored Connect form by deleting AffectedAreaInput and introducing four focused problem-area components; Engine form now asks for API/SDK with Unity/.NET special-case; Tokens/Marketplace form renamed fields and added optional Support ID input. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant UI as Engine Form UI
participant State as Form State
participant Renderer as Conditional Renderer
User->>UI: select SDK/API option
UI->>State: set selectedSDK
State-->>UI: selectedSDK
alt selectedSDK == "API endpoint"
UI->>Renderer: show API endpoint URL (optional), Queue/Support ID, Description
else selectedSDK == "Unity" or selectedSDK == ".NET"
UI->>Renderer: render UnitySupportForm
else
UI->>Renderer: show "Version of SDK", Queue/Support ID, Description
end
Renderer-->>User: form fields rendered/updated
sequenceDiagram
actor User
participant UI as Connect Form UI
participant State as Form State
participant Component as Problem-Area Component
User->>UI: choose problem area label
UI->>State: set selectedProblemArea
State-->>UI: selectedProblemArea
UI->>Component: render matching component (one of four)
Component-->>User: component-specific inputs + Description
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8414 +/- ##
=======================================
Coverage 54.85% 54.85%
=======================================
Files 919 919
Lines 60853 60853
Branches 4142 4142
=======================================
Hits 33378 33378
Misses 27373 27373
Partials 102 102
🚀 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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (2)
29-36: Remove unused import.
_ContractSupportFormis dynamically imported but never used in theproductOptionsarray or anywhere else in the file. Remove this import to reduce bundle size and code clutter.Apply this diff:
-const _ContractSupportForm = dynamic( - () => - import("./contact-forms/contracts").then((mod) => mod.ContractSupportForm), - { - loading: () => <Skeleton className="h-12" />, - ssr: false, - }, -);
51-58: Remove unused import.
_PaymentsSupportFormis dynamically imported but never used in theproductOptionsarray or anywhere else in the file. Remove this import to reduce bundle size and code clutter.Apply this diff:
-const _PaymentsSupportForm = dynamic( - () => - import("./contact-forms/payments").then((mod) => mod.PaymentsSupportForm), - { - loading: () => <Skeleton className="h-12" />, - ssr: false, - }, -);
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/other/index.tsx (1)
5-9: Consider simplifying SharedOtherProblemComponent.The
SharedOtherProblemComponentis a thin wrapper that only manages state forDescriptionInput. Unless this structure is needed for future extensibility or consistency with other form components, you could simplify by managing thedescriptionstate directly inOtherSupportForm.Example simplification:
-const SharedOtherProblemComponent = () => { - const [description, setDescription] = useState<string>(""); - - return <DescriptionInput value={description} onChange={setDescription} />; -}; export function OtherSupportForm() { const [problemArea, setProblemArea] = useState<string>(""); + const [description, setDescription] = useState<string>(""); return ( <> <SupportForm_SelectInput formLabel="Problem area" name="extraInfo_Problem_Area" onValueChange={setProblemArea} options={OTHER_PROBLEM_AREAS} promptText="Select a problem area" required={true} value={problemArea} /> - {problemArea && <SharedOtherProblemComponent />} + {problemArea && <DescriptionInput value={description} onChange={setDescription} />} </> ); }apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (1)
70-82: Updated labels improve clarity.The revised product option labels better communicate what each support category covers, aligning with the form restructuring in other files.
Minor grammatical nitpick: Line 74 uses "API/SDK's" with an apostrophe, but the plural should be "API/SDKs" without an apostrophe (apostrophes are for possessives, not plurals).
Apply this diff if you want to fix it:
- label: "Using API/SDK's, errored transactions", + label: "Using API/SDKs, errored transactions",apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (1)
29-50: Duplicate formValue with AccountAbstractionComponent.Lines 42 and 58 both use
formValue="extraInfo_Support_ID". While this works currently since only one problem area component renders at a time, using unique form values (e.g.,extraInfo_Support_ID_CustomAuthandextraInfo_Support_ID_AA) would be more maintainable and prevent potential issues if the form structure changes.Apply this diff:
<SupportForm_TextInput formLabel="Support ID" - formValue="extraInfo_Support_ID" + formValue="extraInfo_Support_ID_CustomAuth" inputType="text" placeholder="Enter support ID (optional)" required={false} />And for AccountAbstractionComponent (lines 56-62):
<SupportForm_TextInput formLabel="Support ID" - formValue="extraInfo_Support_ID" + formValue="extraInfo_Support_ID_AA" inputType="text" placeholder="Enter support ID (optional)" required={false} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/other/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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]/(team)/~/support/_components/SupportTicketForm.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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]/(team)/~/support/_components/SupportTicketForm.tsx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx
📚 Learning: 2025-08-20T10:37:10.123Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx:1-1
Timestamp: 2025-08-20T10:37:10.123Z
Learning: In apps/dashboard, prefer importing UI components from "workspace/ui/components/*" where possible, as per jnsdls preference, rather than from "@/components/ui/*".
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_SelectInput.tsx (1)
SupportForm_SelectInput(20-51)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_DescriptionInput.tsx (1)
DescriptionInput(15-35)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (1)
ConnectSupportForm(92-109)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (1)
EngineSupportForm(13-60)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
TokensMarketplaceSupportForm(5-34)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_DescriptionInput.tsx (1)
DescriptionInput(15-35)
⏰ 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). (7)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/other/index.tsx (2)
20-37: LGTM! Clean implementation with proper conditional rendering.The
OtherSupportFormcomponent correctly manages state and conditionally displays the description input only after a problem area is selected. The integration of the new "Agents/x402 and AI" option is seamless, and all form props are properly configured.
17-17: No changes needed—x402 is an established payment protocol.The "x402" reference is not unclear. It's an official payment protocol documented throughout the codebase with public documentation, dashboard integration, and playground examples. Users selecting "Agents/x402 and AI" as a support category would be developers already familiar with this protocol.
Backend compatibility verification is a standard best practice for any new support category, but it's not driven by terminology clarity.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (2)
10-16: LGTM! Improved field clarity.The updated label, form value, and placeholder make it clearer that users can provide either a token address or symbol, with a helpful example.
24-30: LGTM! Useful optional field.The optional Support ID field provides helpful debugging context for support tickets, consistent with similar fields in other support forms.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (2)
6-11: LGTM! Clear API/SDK options.The new options array simplifies the form structure and provides clear choices for users to identify which API or SDK they're using.
28-57: LGTM! Conditional rendering logic is correct.The form correctly shows different fields based on the selected API/SDK option:
- SDK version for SDK options (not for API endpoint)
- Optional Support ID for all options
- API endpoint URL only when API endpoint is selected
- Required description for all options
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (4)
1-2: LGTM! Required client directive.The
"use client"directive is necessary since this file uses React hooks (useState), which require client-side rendering.
13-27: LGTM! Well-structured component.The component appropriately captures the user ID/email for social/email login issues with a required field and description.
68-71: LGTM! Minimal component for simple cases.This component appropriately requires only a description for third-party/EOA wallet issues where no additional structured fields are needed.
73-109: LGTM! Component selection logic works correctly.The
PROBLEM_AREASmapping and conditional rendering based on the selected problem area work correctly. Each problem area component is isolated and only one renders at a time, ensuring proper state management.
...d/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (1)
20-28: Fix misleading promptText.Line 25's
promptTextstill says "Select a problem area", but this field now asks "Which API/SDK are you using?". The prompt text should match the field's purpose.Apply this diff:
- promptText="Select a problem area" + promptText="Select an API/SDK"
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (1)
7-12: Consider a more descriptive label for the API option.The label "API endpoint" is somewhat vague compared to the other SDK-specific options. Consider using a more descriptive term like "REST API" or "HTTP API" for clarity.
Apply this diff if you agree:
const API_SDK_OPTIONS = [ - "API endpoint", + "REST API", "React/TypeScript", "Unity/.NET", "React Native",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/AffectedAreaInput.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/AffectedAreaInput.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (4)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_SelectInput.tsx (1)
SupportForm_SelectInput(20-51)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_UnityInput.tsx (1)
UnitySupportForm(18-50)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_DescriptionInput.tsx (1)
DescriptionInput(15-35)
⏰ 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). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (1)
29-62: LGTM! The conditional rendering logic is well-structured.The SDK-specific rendering paths are correctly implemented:
- Unity/.NET users see OS, target platform, and Unity version fields
- API endpoint users see the API endpoint URL field
- Other SDK users see the SDK version field
- All users see the optional Queue/Support ID field and required Description field
The logic is clean, appropriately uses required/optional flags, and handles all SDK selection cases correctly.
.../dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
Outdated
Show resolved
Hide resolved
.../dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (1)
54-66: Fix grammar and capitalization issues in product option labels.Two issues in the labels:
- Line 58: "API/SDK's" uses incorrect possessive apostrophe; should be "APIs/SDKs" (plural).
- Line 62: Inconsistent capitalization—"Bridging" is capitalized while "swapping" is lowercase. For consistency, use lowercase for all verbs after the first: "Creating, bridging and swapping tokens".
Apply this diff:
{ component: <ConnectSupportForm />, label: "Working with User Wallets" }, { component: <EngineSupportForm />, - label: "Using API/SDK's, errored transactions", + label: "Using APIs/SDKs, errored transactions", }, { component: <TokensMarketplaceSupportForm />, - label: "Creating, Bridging and swapping tokens", + label: "Creating, bridging and swapping tokens", },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/payments/index.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/payments/index.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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]/(team)/~/support/_components/SupportTicketForm.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 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]/(team)/~/support/_components/SupportTicketForm.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (1)
ConnectSupportForm(92-109)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx (1)
EngineSupportForm(14-65)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
TokensMarketplaceSupportForm(5-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). (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx (1)
15-52: Dynamic imports are correctly structured.The dynamic imports for all support forms are properly configured with loading states and named exports, maintaining consistency across the codebase.
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 focuses on refactoring and enhancing various support forms in the application, including the removal of outdated components and the introduction of new fields to improve user input for support tickets.
### Detailed summary
- Deleted `payments`, `contracts`, and `AffectedAreaInput` components.
- Updated `OtherSupportForm` with a new label.
- Modified `TokensMarketplaceSupportForm` to include a new input for "Support ID in logs".
- Removed dynamic imports for `ContractSupportForm` and `PaymentsSupportForm`.
- Updated `productOptions` labels for clarity.
- Replaced `ENGINE_TYPES` and `ENGINE_PROBLEM_AREAS` with `API_SDK_OPTIONS`.
- Enhanced `EngineSupportForm` with new inputs and logic based on selected SDK.
- Introduced new components for user wallet issues and account abstraction.
- Updated `PROBLEM_AREAS` to include new components for social/email login and user wallet custom auth.
> ✨ 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 "Agents/x402 and AI" support option and an optional "Support ID in logs" field.
* **Improvements**
* Reorganized and simplified support forms: Wallets → Working with User Wallets, Transactions → API/SDKs, Tokens/Marketplace → Creating, Bridging and swapping tokens; token input accepts address or symbol.
* Streamlined Connect and Engine flows with focused issue categories (social/email login, custom auth, account abstraction, third‑party wallets, API/SDK selection).
* **Chores**
* Removed legacy Contracts, Payments and affected-area form screens.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
yash/support-changes
branch
from
da8f55f to
d6bc43c
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
24-30: Consider adding format guidance or validation for Support ID.The new optional "Support ID in logs" field lacks validation or detailed guidance on the expected format. Users may be unsure where to find this ID or what constitutes a valid value.
Consider:
- Adding a help text or tooltip explaining where users can locate the Support ID (e.g., browser console, network logs, specific log files)
- If the Support ID follows a specific pattern (e.g., UUID, numeric, prefixed format), add pattern validation to catch input errors early
- Alternatively, provide a link to documentation about finding Support IDs
Example enhancement:
<SupportForm_TextInput formLabel="Support ID in logs" formValue="extraInfo_Support_ID_Logs" inputType="text" - placeholder="Enter support ID from logs" + placeholder="Enter support ID from logs (e.g., support_abc123)" required={false} />If the SupportForm_TextInput component supports a
helpTextordescriptionprop, consider adding one to guide users.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (2)
73-90: Consider storing component functions instead of pre-created elements.The current pattern stores JSX elements created at module load. While functional, the conventional React pattern stores component references (functions) and instantiates them at render time.
Apply this refactor for better flexibility and idiomatic React:
+type ProblemAreaItem = { + label: string; + component: () => ReactElement; +}; const PROBLEM_AREAS: ProblemAreaItem[] = [ { - component: <SocialEmailLoginIssuesComponent />, + component: SocialEmailLoginIssuesComponent, label: "Social/Email login issues", }, { - component: <UserWalletCustomAuthComponent />, + component: UserWalletCustomAuthComponent, label: "User wallet with custom auth", }, { - component: <AccountAbstractionComponent />, + component: AccountAbstractionComponent, label: "Account Abstraction", }, { - component: <ThirdPartyEOAWalletsComponent />, + component: ThirdPartyEOAWalletsComponent, label: "Third party/EOA wallets", }, ];Then update the type definition at lines 8-11:
type ProblemAreaItem = { label: string; - component: ReactElement; + component: () => ReactElement; };And update the render logic at line 106:
-{PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component} +{(() => { + const Component = PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component; + return Component ? <Component /> : null; +})()}
106-106: Consider adding a key prop for explicit reconciliation.When conditionally rendering different components, adding a key prop helps React properly unmount/remount components when switching between problem areas.
Apply this diff:
- {PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component} + <div key={selectedProblemArea}> + {PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component} + </div>Or use React.Fragment:
+import { type ReactElement, useState, Fragment } from "react"; ... - {PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component} + <Fragment key={selectedProblemArea}> + {PROBLEM_AREAS.find((o) => o.label === selectedProblemArea)?.component} + </Fragment>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/AffectedAreaInput.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/contracts/index.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/other/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/payments/index.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx(2 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/payments/index.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/AffectedAreaInput.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/contracts/index.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/other/index.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/engine/index.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportTicketForm.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-06-10T00:50:20.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_TextInput.tsx (1)
SupportForm_TextInput(15-36)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/shared/SupportForm_DescriptionInput.tsx (1)
DescriptionInput(15-35)
⏰ 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, vite)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/tokens-marketplace/index.tsx (1)
10-16: The formValue change is not a breaking change. The field name is only used locally in the form; the backend receives transformed human-readable names instead. Changing fromextraInfo_TokensMarketplace_AddresstoextraInfo_Token_Address_Symbolonly updates the user-facing field label in the message body (e.g., from "TokensMarketplace Address" to "Token Address Symbol"), which poses no backend compatibility risk.Likely an incorrect or invalid review comment.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/contact-forms/connect/index.tsx (2)
13-71: LGTM! Clean component implementation.The four problem-area components follow a consistent pattern with proper controlled inputs and clear field labels. The state management for description inputs is correct.
92-109: LGTM! Main form component is well-structured.The ConnectSupportForm component correctly manages the problem area selection and conditionally renders the appropriate component. The use of optional chaining ensures safety when no matching problem area is found.
graphite-app
bot
removed
the
merge-queue
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR focuses on refactoring and enhancing the support form components in the application. It removes obsolete components, updates labels, and introduces new fields to improve user experience and support functionality.
Detailed summary
PaymentsSupportForm,ContractSupportForm, and related components.TokensMarketplaceSupportForm.TokensMarketplaceSupportForm.EngineSupportFormto use newAPI_SDK_OPTIONS.EngineSupportForm.PROBLEM_AREASto reflect new components and labels.Summary by CodeRabbit
New Features
Improvements
Chores