[Dashboard] migrate authorized wallets components to shadcn #7127

jnsdls · 2025-05-22T17:21:08Z

Summary

migrate authorized wallets revoke modal from Chakra to shadcn dialog
replace Chakra button/text in AuthorizedWalletsTable with shadcn + tailwind
drop Chakra provider wrapper from account devices page

Testing

pnpm biome check --apply apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx "apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx"
pnpm test (fails: spawn anvil ENOENT)

PR-Codex overview

This PR focuses on refactoring the AccountDevicesPage and the AuthorizedWalletRevokeModal components by removing the ChakraProviderSetup dependency and replacing Modal components from @chakra-ui/react with Dialog components from a custom UI library.

Detailed summary

Removed ChakraProviderSetup from AccountDevicesPage.
Directly rendered AuthorizedWalletsTable in AccountDevicesPage.
Replaced Modal components with Dialog components in AuthorizedWalletRevokeModal.
Updated modal structure and styling in AuthorizedWalletRevokeModal.
Changed state management for modal visibility in AuthorizedWalletsTable.
Replaced Text component with span for displaying wallet addresses and dates in AuthorizedWalletsTable.
Updated button styles and variants in AuthorizedWalletsTable.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

Refactor
- Updated modal and button components in the authorized wallets section to use a new UI library, resulting in a refreshed look and improved consistency.
- Simplified modal state management for revoking wallet access.
- Removed unused UI provider wrapper from the devices page for cleaner structure.
Style
- Applied updated styling to dialogs, buttons, and text elements for a more cohesive user interface.

changeset-bot · 2025-05-22T17:21:12Z

⚠️ No Changeset found

Latest commit: 9f6dc21

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

graphite-app · 2025-05-22T17:21:15Z

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.}

vercel · 2025-05-22T17:21:15Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2025 5:28pm

4 Skipped Deployments

Name	Status	Updated (UTC)
docs-v2	⬜️ Skipped (Inspect)	May 22, 2025 5:28pm
login	⬜️ Skipped (Inspect)	May 22, 2025 5:28pm
thirdweb_playground	⬜️ Skipped (Inspect)	May 22, 2025 5:28pm
wallet-ui	⬜️ Skipped (Inspect)	May 22, 2025 5:28pm

coderabbitai · 2025-05-22T17:21:15Z

Walkthrough

The changes remove Chakra UI dependencies and usage from the account devices and authorized wallets components. Chakra UI modal and button components are replaced with custom dialog and button components, and modal state is now managed with React's useState instead of Chakra's useDisclosure. Styling and structure are updated to match the new UI library.

Changes

File(s)	Change Summary
apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx	Removed the ChakraProviderSetup wrapper from the AccountDevicesPage component. The AuthorizedWalletsTable is now rendered directly. Associated comments were also removed.
apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx	Refactored the modal to use a custom Dialog component and subcomponents instead of Chakra UI's Modal components. Updated modal structure, open/close handling, and restyled the footer buttons to use new variants. Removed the modal close button and adjusted layout classes.
apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx	Replaced Chakra UI's useDisclosure with useState for modal state. Updated button and text components to use custom UI library components and styling. Changed "Revoke Access" button to use the destructive variant. Simplified modal state management.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AccountDevicesPage
    participant AuthorizedWalletsTable
    participant AuthorizedWalletRevokeModal

    User->>AccountDevicesPage: Navigates to Account Devices
    AccountDevicesPage->>AuthorizedWalletsTable: Render table of authorized wallets
    User->>AuthorizedWalletsTable: Clicks "Revoke Access"
    AuthorizedWalletsTable->>AuthorizedWalletRevokeModal: Open modal (via useState)
    User->>AuthorizedWalletRevokeModal: Confirms revoke
    AuthorizedWalletRevokeModal->>AuthorizedWalletsTable: Calls onRevoke handler
    AuthorizedWalletsTable->>AuthorizedWalletsTable: Updates wallet list
    AuthorizedWalletRevokeModal->>AuthorizedWalletRevokeModal: Closes modal (via onOpenChange)

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.

Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 30th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between c1f7aaa and 9f6dc21.

📒 Files selected for processing (3)

apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx (1 hunks)
apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx (2 hunks)
apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx (6 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx (1)

apps/dashboard/src/@/components/ui/button.tsx (1)

Button (67-67)

⏰ Context from checks skipped due to timeout of 90000ms (3)

GitHub Check: Size
GitHub Check: Lint Packages
GitHub Check: Analyze (javascript)

🔇 Additional comments (13)

apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx (1)

11-16: Changes look good - ChakraProviderSetup wrapper removal

The removal of the ChakraProviderSetup wrapper is consistent with the PR's goal of migrating from Chakra UI to shadcn UI components. The component still maintains the same functionality while eliminating the Chakra UI dependency.

apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx (8)

3-3: Import from shadcn UI button component

Successfully migrated from Chakra UI Button to shadcn UI Button component.

35-35: State management simplified

Good replacement of Chakra's useDisclosure hook with React's useState for modal visibility, simplifying the component's dependencies.

46-47: Migrated Text component to styled span

Successfully replaced Chakra UI's Text component with a simple span element using Tailwind CSS classes for styling.

48-48: Migrated Text component to styled span

Successfully replaced Chakra UI's Text component with a simple span element using Tailwind CSS classes for styling.

61-61: Migrated Text component to styled span

Successfully replaced Chakra UI's Text component with a simple span element using Tailwind CSS classes for styling.

73-76: Updated button styling to shadcn UI variant

Changed from Chakra UI's outlined button with red color scheme to shadcn UI's destructive variant, maintaining the same visual intent.

87-87: Updated modal state management

Successfully updated the handler to use the new state management approach with useState.

91-91: Updated modal state management

Successfully updated the close handler to use the new state management approach with useState.

apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx (4)

1-8: Migrated imports to shadcn UI components

Successfully replaced Chakra UI component imports with equivalent shadcn UI Dialog components.

21-28: Migrated Modal to Dialog component

Successfully replaced Chakra UI's Modal with shadcn UI's Dialog component, updating the API accordingly:

Using open prop instead of isOpen

Adding an onOpenChange callback that properly calls the existing onClose function

29-34: Migrated modal content structure

Successfully replaced Chakra UI's modal structure with shadcn UI's dialog components and appropriate Tailwind CSS classes for styling.

36-47: Updated modal footer and buttons

Successfully migrated:

ModalFooter to DialogFooter with appropriate styling

Button styling from Chakra UI to shadcn UI variants (outline and destructive)

Maintained the same button functionality

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-05-22T17:22:28Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 55.58%. Comparing base (c1f7aaa) to head (9f6dc21).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7127   +/-   ##
=======================================
  Coverage   55.58%   55.58%           
=======================================
  Files         902      902           
  Lines       58162    58162           
  Branches     4086     4086           
=======================================
  Hits        32329    32329           
  Misses      25731    25731           
  Partials      102      102

Flag	Coverage Δ
packages	`55.58% <ø> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-05-22T17:24:28Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	56.62 KB (0%)	1.2 s (0%)	2.6 s (+9.27% 🔺)	3.7 s
thirdweb (cjs)	309.13 KB (0%)	6.2 s (0%)	18.1 s (-9.48% 🔽)	24.3 s
thirdweb (minimal + tree-shaking)	5.69 KB (0%)	114 ms (0%)	179 ms (-64.03% 🔽)	293 ms
thirdweb/chains (tree-shaking)	531 B (0%)	11 ms (0%)	92 ms (+35.43% 🔺)	103 ms
thirdweb/react (minimal + tree-shaking)	19.5 KB (0%)	390 ms (0%)	378 ms (-25.04% 🔽)	768 ms

MananTank · 2025-05-22T17:54:00Z

[Dashboard] migrate authorized wallets components to shadcn #7127 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge-queue - adds this PR to the back of the merge queue
hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.

[Dashboard] migrate authorized wallets components to shadcn

9f6dc21

jnsdls requested review from a team as code owners May 22, 2025 17:21

jnsdls added the codex label May 22, 2025 — with ChatGPT Connector

vercel bot temporarily deployed to Preview – login May 22, 2025 17:21 Inactive

vercel bot temporarily deployed to Preview – docs-v2 May 22, 2025 17:21 Inactive

vercel bot temporarily deployed to Preview – wallet-ui May 22, 2025 17:21 Inactive

vercel bot temporarily deployed to Preview – thirdweb_playground May 22, 2025 17:21 Inactive

github-actions bot assigned jnsdls May 22, 2025

github-actions bot added the Dashboard Involves changes to the Dashboard. label May 22, 2025

vercel bot deployed to Preview – thirdweb-www May 22, 2025 17:28 View deployment

jnsdls closed this May 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] migrate authorized wallets components to shadcn #7127

[Dashboard] migrate authorized wallets components to shadcn #7127

jnsdls commented May 22, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented May 22, 2025

graphite-app bot commented May 22, 2025

vercel bot commented May 22, 2025 •

edited

Loading

coderabbitai bot commented May 22, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

codecov bot commented May 22, 2025 •

edited

Loading

github-actions bot commented May 22, 2025

MananTank commented May 22, 2025 •

edited by jnsdls

Loading

[Dashboard] migrate authorized wallets components to shadcn #7127

[Dashboard] migrate authorized wallets components to shadcn #7127

Conversation

jnsdls commented May 22, 2025 • edited by coderabbitai bot Loading

Summary

Testing

PR-Codex overview

Detailed summary

Summary by CodeRabbit

changeset-bot bot commented May 22, 2025

⚠️ No Changeset found

graphite-app bot commented May 22, 2025

How to use the Graphite Merge Queue

vercel bot commented May 22, 2025 • edited Loading

coderabbitai bot commented May 22, 2025 • edited Loading

Walkthrough

Changes

Sequence Diagram(s)

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

codecov bot commented May 22, 2025 • edited Loading

Codecov Report

github-actions bot commented May 22, 2025

size-limit report 📦

MananTank commented May 22, 2025 • edited by jnsdls Loading

How to use the Graphite Merge Queue

jnsdls commented May 22, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented May 22, 2025 •

edited

Loading

coderabbitai bot commented May 22, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented May 22, 2025 •

edited

Loading

MananTank commented May 22, 2025 •

edited by jnsdls

Loading