apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/sms-country-select/country-selector.tsx (1)

160-171: Consider adding keyboard navigation support for the expand/collapse button.

While the Button component likely handles basic keyboard interactions, consider adding an aria-expanded attribute to improve accessibility for screen reader users.

           <Button
             variant="ghost"
             className="p-0 size-7"
             onClick={() => setIsExpanded(!isExpanded)}
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? "Collapse tier" : "Expand tier"}
           >

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx (1)

349-367: Consider adding validation for the Application Name field.

While the field defaults to the API Key's name when empty, consider adding client-side validation to ensure the name meets any length or character requirements.

               <FormControl>
                 <Input {...field} />
               </FormControl>
+              <FormDescription>
+                Name that will be displayed in the emails sent to users.{" "}
+                <br className="max-sm:hidden" /> Defaults to your API Key's
+                name. Maximum 50 characters.
+              </FormDescription>
               <FormMessage />

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

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

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx (4)

260-269: Disable the section Save button when not dirty or while updating

Prevents accidental double submits and clarifies state. You already show a spinner; disabling completes the UX.

Apply this diff:

               <Button
                 className="gap-2"
                 type="submit"
                 size="sm"
                 variant="outline"
+                disabled={props.isUpdating || !form.formState.isDirty}
               >
                 {props.isUpdating && <Spinner className="size-4" />}
                 Save
               </Button>

---

315-322: Disable Branding section Save while updating or when no changes

Same rationale as Authentication; avoids redundant submissions.

-          <Button className="gap-2" type="submit" size="sm" variant="outline">
+          <Button
+            className="gap-2"
+            type="submit"
+            size="sm"
+            variant="outline"
+            disabled={props.isUpdating || !props.form.formState.isDirty}
+          >

---

769-773: Disable Native Apps Save while updating or when no changes

Keeps section Save behavior consistent.

-          <Button className="gap-2" type="submit" size="sm" variant="outline">
+          <Button
+            className="gap-2"
+            type="submit"
+            size="sm"
+            variant="outline"
+            disabled={props.isUpdating || !form.formState.isDirty}
+          >

---

95-104: trackingData is computed but not consumed by update path

InAppWalletSettingsUI requires updateApiKey(projectValues, trackingData) and you compute tracking booleans at Lines 233-236, but the upstream implementation (handleUpdateProject) ignores the second arg. Either wire this into analytics/telemetry or drop the parameter to avoid dead code.

If you intend to remove it for now, adjust the type and call site:

-const InAppWalletSettingsPageUI: React.FC<
-  InAppWalletSettingsPageProps & {
-    updateApiKey: (
-      projectValues: Partial<Project>,
-      trackingData: UpdateAPIKeyTrackingData,
-    ) => void;
+const InAppWalletSettingsPageUI: React.FC<
+  InAppWalletSettingsPageProps & {
+    updateApiKey: (projectValues: Partial<Project>) => void;

-export const InAppWalletSettingsUI: React.FC<
+export const InAppWalletSettingsUI: React.FC<
   InAppWalletSettingsPageProps & {
-    updateApiKey: (
-      projectValues: Partial<Project>,
-      trackingData: UpdateAPIKeyTrackingData,
-    ) => void;
+    updateApiKey: (projectValues: Partial<Project>) => void;

-  props.updateApiKey(
-      {
-        services: newServices,
-      },
-      {
-        hasCustomAuthEndpoint: !!customAuthEndpoint,
-        hasCustomBranding: !!branding,
-        hasCustomJwt: !!customAuthentication,
-      },
-    );
+  props.updateApiKey({
+    services: newServices,
+  });

Alternatively, if you plan to track, I can help add a lightweight telemetry hook that consumes these flags.

Also applies to: 228-237

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx (1)

705-729: Buttons may submit the form unintentionally; set type="button"

Inside a form, a button without an explicit type defaults to submit. The “Remove header” and “Add header” buttons should not submit the form.

-                <Button
+                <Button
+                  type="button"
                   aria-label="Remove header"
                   className="!w-auto px-3"
                   onClick={() => {
                     customHeaderFields.remove(customHeaderIdx);
                   }}
                   variant="outline"
                 >
@@
-          <Button
+          <Button
+            type="button"
             className="w-full gap-2 bg-background"
             onClick={() => {
               customHeaderFields.append({
                 key: "",
                 value: "",
               });
             }}
             variant="outline"
           >

Also applies to: 734-746

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx (2)

827-846: A11y: must be the first child of

(do not wrap it in a div)

The current markup nests legend inside a div. This is invalid HTML and harms semantics for assistive tech. Make legend the first child and place actions/headers alongside without wrapping legend.

-function Fieldset(props: {
-  legend: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-lg border bg-card relative">
-      <DynamicHeight>
-        <fieldset className="p-4 md:px-6 md:py-5">
-          {/* put inside div to remove default styles on legend  */}
-          <div className="border-b pb-4 mb-5 border-dashed font-semibold text-xl tracking-tight">
-            <legend> {props.legend}</legend>
-          </div>
-
-          {props.children}
-        </fieldset>
-      </DynamicHeight>
-      {props.footer}
-    </div>
-  );
-}
+function Fieldset(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  headerActions?: React.ReactNode; // new, for top-right Save, etc.
+}) {
+  return (
+    <div className="relative rounded-lg border bg-card">
+      <DynamicHeight>
+        <fieldset className="p-4 md:px-6 md:py-5">
+          <legend className="mb-5 border-b border-dashed pb-4 font-semibold text-xl tracking-tight">
+            {props.legend}
+          </legend>
+          {props.headerActions ? (
+            <div className="absolute right-6 top-4">{props.headerActions}</div>
+          ) : null}
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
+  );
+}

---

849-873: A11y: must be direct child of

(same issue in FieldsetWithDescription)

Move legend to be the first child of fieldset; place the description after it. This mirrors the fix above.

-function FieldsetWithDescription(props: {
-  legend: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  description: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-lg border bg-card relative">
-      <DynamicHeight>
-        <fieldset className="p-4 md:p-6">
-          {/* put inside div to remove default styles on legend  */}
-          <div className="pr-20">
-            <legend className="font-semibold text-xl tracking-tight">
-              {props.legend}
-            </legend>
-            <p className="text-muted-foreground text-sm">{props.description}</p>
-          </div>
-
-          {props.children}
-        </fieldset>
-      </DynamicHeight>
-      {props.footer}
-    </div>
-  );
-}
+function FieldsetWithDescription(props: {
+  legend: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  description: React.ReactNode;
+}) {
+  return (
+    <div className="relative rounded-lg border bg-card">
+      <DynamicHeight>
+        <fieldset className="p-4 md:p-6">
+          <legend className="pr-20 font-semibold text-xl tracking-tight">
+            {props.legend}
+          </legend>
+          <div className="pr-20">
+            <p className="text-muted-foreground text-sm">{props.description}</p>
+          </div>
+          {props.children}
+        </fieldset>
+      </DynamicHeight>
+      {props.footer}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/settings/components/index.tsx (2)

312-323: Branding footer Save is fine, but consider consistent header placement

This section likely won’t overflow, so footer is acceptable. For consistency and to avoid later regressions if content grows, you may consider headerActions here too (optional).

---

353-385: Place FormMessage after the control for better a11y and UX

FormMessage appears above the input inside the header block. Validation messages should follow the control they describe.

               <FormItem className="lg:border-r lg:border-dashed lg:pr-6">
                 <div className="space-y-1">
                   <FormLabel>Application Image URL</FormLabel>
                   <FormDescription className="!mb-4">
                     Logo that will display in the emails sent to users.{" "}
                     <br className="max-sm:hidden" /> The image must be squared
                     with recommended size of 72x72 px.
                   </FormDescription>
-
-                  <FormMessage />
                 </div>

                 <FormControl>
                   <AppImageFormControl
                     client={props.client}
                     setUri={(uri) => {
                       props.form.setValue("branding.applicationImageUrl", uri, {
                         shouldDirty: true,
                         shouldTouch: true,
                       });
                     }}
                     uri={props.form.watch("branding.applicationImageUrl")}
                   />
                 </FormControl>
+                <FormMessage />

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

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

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Use React Query (`tanstack/react-query`) for all client data fetching.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.