feat: add Custom RPC settings UI - #299
Conversation
Popup pages + reusable components for the Custom RPC node list, edit/delete flow, and add-node action sheet. Extends PageHeader with an optional right-side action icon; adds Button, SegmentedControl, and ActionSheet to ui/general/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
tailwind.config.js had icy-blue-200 truncated to 5 hex digits (#a2f5f), making the token invalid. Fixed to #a2f5ff per Figma, and swapped Button's spinner from a raw hex to the token now that it resolves correctly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 54 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
Note
|
| Layer / File(s) | Summary |
|---|---|
General UI primitives and development setup .claude/launch.json, package.json, tailwind.config.js, ui/general/* |
Adds Button, ActionSheet, and SegmentedControl components, extends PageHeader with a right-side action, and adds their Storybook configurations and stories. |
Custom RPC settings rows ui/popup/settings/* |
Adds SettingRow and CustomRpcSettingsSection components with Storybook states for values, actions, chevrons, and long labels. |
RPC node and add-node controls ui/popup/custom-rpc/AddCustomNodeForm.*, ui/popup/custom-rpc/NodeListItem.* |
Adds controlled RPC node forms and node rows supporting validation, submission, selection, edit-mode removal, and corresponding stories. |
Custom RPC page orchestration ui/popup/custom-rpc/CustomRpcPage.* |
Adds network selection, node management, edit-mode controls, add-node sheet integration, and interactive page stories. |
Estimated code review effort: 4 (Complex) | ~45 minutes
Sequence Diagram(s)
sequenceDiagram
participant User
participant CustomRpcPage
participant SegmentedControl
participant NodeListItem
participant ActionSheet
participant AddCustomNodeForm
User->>SegmentedControl: choose network
SegmentedControl->>CustomRpcPage: report network change
User->>NodeListItem: select or remove node
NodeListItem->>CustomRpcPage: report node action
User->>CustomRpcPage: open add-node flow
CustomRpcPage->>ActionSheet: render add-node sheet
ActionSheet->>AddCustomNodeForm: provide controlled form
AddCustomNodeForm->>CustomRpcPage: submit node data
Possibly related PRs
- forbole/kastle#292: Adds the PageHeader component that this PR extends with right-side action support.
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 9.09% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly summarizes the main change: adding the Custom RPC settings UI. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feat/custom-rpc-ui
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@ui/general/Button.stories.tsx`:
- Line 2: Replace the relative imports with the configured `@/` aliases in
ui/general/Button.stories.tsx lines 2-2, ui/general/ActionSheet.stories.tsx
lines 3-4, and ui/general/SegmentedControl.stories.tsx lines 3-3; target the
Button, ActionSheet, AddCustomNodeForm, and SegmentedControl imports
respectively, with no other changes.
In `@ui/popup/custom-rpc/AddCustomNodeForm.tsx`:
- Around line 34-44: Associate both form labels with their inputs in
AddCustomNodeForm: set the “Node Name” label’s htmlFor to a unique matching
input id such as node-name, and set the “RPC URL” label’s htmlFor to a matching
id such as rpc-url on the corresponding input.
In `@ui/popup/custom-rpc/NodeListItem.tsx`:
- Around line 27-31: Update the selectable item div in NodeListItem to include
tabIndex={0} and an onKeyDown handler that invokes onSelect for Enter and Space
keys, while preserving the existing canSelect guard and click behavior.
In `@ui/popup/settings/SettingRow.tsx`:
- Around line 23-29: Update the label and value elements in SettingRow to
truncate overflowing text with an ellipsis, and apply appropriate
flex-shrink/min-width behavior to the text and its containing flex items.
Preserve the chevron’s visibility and ensure long LongNodeName-style content
remains within the fixed-width popup.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 0980129d-2a79-474b-9606-a492e59560f3
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (21)
.claude/launch.jsonpackage.jsontailwind.config.jsui/general/ActionSheet.stories.tsxui/general/ActionSheet.tsxui/general/Button.stories.tsxui/general/Button.tsxui/general/PageHeader.stories.tsxui/general/PageHeader.tsxui/general/SegmentedControl.stories.tsxui/general/SegmentedControl.tsxui/popup/custom-rpc/AddCustomNodeForm.stories.tsxui/popup/custom-rpc/AddCustomNodeForm.tsxui/popup/custom-rpc/CustomRpcPage.stories.tsxui/popup/custom-rpc/CustomRpcPage.tsxui/popup/custom-rpc/NodeListItem.stories.tsxui/popup/custom-rpc/NodeListItem.tsxui/popup/settings/CustomRpcSettingsSection.stories.tsxui/popup/settings/CustomRpcSettingsSection.tsxui/popup/settings/SettingRow.stories.tsxui/popup/settings/SettingRow.tsx
| @@ -0,0 +1,62 @@ | |||
| import type { Meta, StoryObj } from "@storybook/react"; | |||
| import Button from "./Button"; | |||
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use absolute path aliases for imports.
As per coding guidelines, use @/ path aliases for absolute imports instead of relative paths.
ui/general/Button.stories.tsx#L2-L2: Update the import to useimport Button from "@/ui/general/Button";ui/general/ActionSheet.stories.tsx#L3-L4: Update the imports to use@/ui/general/ActionSheetand@/ui/popup/custom-rpc/AddCustomNodeForm.ui/general/SegmentedControl.stories.tsx#L3-L3: Update the import to useimport SegmentedControl from "@/ui/general/SegmentedControl";
📍 Affects 3 files
ui/general/Button.stories.tsx#L2-L2(this comment)ui/general/ActionSheet.stories.tsx#L3-L4ui/general/SegmentedControl.stories.tsx#L3-L3
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@ui/general/Button.stories.tsx` at line 2, Replace the relative imports with
the configured `@/` aliases in ui/general/Button.stories.tsx lines 2-2,
ui/general/ActionSheet.stories.tsx lines 3-4, and
ui/general/SegmentedControl.stories.tsx lines 3-3; target the Button,
ActionSheet, AddCustomNodeForm, and SegmentedControl imports respectively, with
no other changes.
Source: Coding guidelines
- Use @/ path aliases instead of relative imports (matches existing ui/ convention) - AddCustomNodeForm: associate labels with inputs via htmlFor/id - NodeListItem: add tabIndex + onKeyDown (Enter/Space) for keyboard nav on the role="button" row - SettingRow: truncate long label/value text instead of overflowing the fixed-width popup Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Fixes the CI "submit" check that was failing on formatting. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1 participant
What changed
Popup UI for the Custom RPC node feature — settings entry, node list with select/delete, and add-node flow.
ui/general/(new shared components)Button— variant (primary/secondary) × size (md 46px / lg 62px), disabled + loading statesActionSheet— generic bottom-sheet overlay shellSegmentedControl— generic pill tab switcher (e.g. Mainnet/Testnet)PageHeader— extended with an optional right-side action icon (e.g. edit pencil)ui/popup/custom-rpc/CustomRpcPage— node list screen: network tabs, node rows, edit mode (delete, default node excluded), opens the add-node sheetNodeListItem— node row (icon, name, Default tag, url, select/remove)AddCustomNodeForm— add-node form (Node Name + RPC URL, error/loading states) rendered insideActionSheetui/popup/settings/CustomRpcSettingsSection— Network + Custom RPC rows (for the existing Settings screen, not yet rebuilt inui/)SettingRow— generic settings row (label · value · chevron)Fix:
icy-blue-200was truncated to 5 hex digits intailwind.config.js(#a2f5f, invalid) — corrected to#a2f5ffper Figma, andButton's loading spinner now uses the token instead of a raw hex.Design reference
Figma: Kastle Extension → Setting page → "custom rpc" section (node
12703:143874).Storybook
All states covered —
Popup/CustomRpc/{Components,Screens},Popup/Settings/Components,General/{Button,ActionSheet,SegmentedControl,PageHeader}. Runnpm run storybook.Notes for Dev
🤖 Generated with Claude Code
Summary by CodeRabbit
icy-blueTailwind palette value to restore consistent color rendering.