From 70a519ada43f263c87dd47e54cba76938b708e33 Mon Sep 17 00:00:00 2001 From: jnsdls Date: Fri, 23 May 2025 03:54:26 +0000 Subject: [PATCH] [Dashboard] migrate authorized wallets components to shadcn (#7131) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 - cleanup modal title/description and remove node cache ## Testing - `pnpm biome check --apply apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx .gitignore` - `pnpm test` *(fails: spawn anvil ENOENT)* --- ## PR-Codex overview This PR focuses on refactoring the `AccountDevicesPage` and the `AuthorizedWalletRevokeModal` components to replace the `Chakra UI` modal with a new `Dialog` component. It also updates the `AuthorizedWalletsTable` to use local state for modal visibility and modifies UI elements for consistency. ### Detailed summary - Removed `ChakraProviderSetup` from `AccountDevicesPage`. - Replaced `Modal` components with `Dialog` components in `AuthorizedWalletRevokeModal`. - Updated modal structure and styling in `AuthorizedWalletRevokeModal`. - Changed state management for modal visibility in `AuthorizedWalletsTable`. - Updated text rendering from `Text` to `span` for consistency in `AuthorizedWalletsTable`. - Changed button styles in `AuthorizedWalletsTable` for revocation actions. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit - **Refactor** - Replaced Chakra UI components with custom UI library components in wallet authorization modals and tables. - Updated modal and button styling for a consistent look and feel. - Simplified modal state management in the authorized wallets table. - **Chores** - Updated `.gitignore` to exclude dashboard node compilation cache. --- .gitignore | 3 +- .../account/devices/AccountDevicesPage.tsx | 14 ++---- .../AuthorizedWalletRevokeModal.tsx | 49 +++++++++++-------- .../AuthorizedWalletsTable.tsx | 18 +++---- 4 files changed, 44 insertions(+), 40 deletions(-) diff --git a/.gitignore b/.gitignore index b9bd7c27d98..9706c4444dd 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,5 @@ storybook-static .aider* tsconfig.tsbuildinfo -.cursor \ No newline at end of file +.cursor +apps/dashboard/node-compile-cache diff --git a/apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx b/apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx index a6968bedb98..fa2fa535bf9 100644 --- a/apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx +++ b/apps/dashboard/src/app/(app)/account/devices/AccountDevicesPage.tsx @@ -1,22 +1,18 @@ "use client"; -import { ChakraProviderSetup } from "@/components/ChakraProviderSetup"; import { useAuthorizedWallets } from "@3rdweb-sdk/react/hooks/useApi"; import { AuthorizedWalletsTable } from "components/settings/AuthorizedWallets/AuthorizedWalletsTable"; -// TODO - remove ChakraProviderSetup after migrating AuthorizedWalletsTable // TODO - fetch the authorized wallets server side export function AccountDevicesPage() { const authorizedWalletsQuery = useAuthorizedWallets(); return ( - - - + ); } diff --git a/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx b/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx index ba92ed1be04..78bc82c10b9 100644 --- a/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx +++ b/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletRevokeModal.tsx @@ -1,12 +1,12 @@ +import { Button } from "@/components/ui/button"; import { - Modal, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, -} from "@chakra-ui/react"; -import { Button } from "tw-components"; + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; type AuthorizedWalletRevokeModalProps = { isOpen: boolean; @@ -19,25 +19,34 @@ export const AuthorizedWalletRevokeModal: React.FC< AuthorizedWalletRevokeModalProps > = ({ isOpen, onClose, onSubmit, authorizedWalletId }) => { return ( - - - - Are you sure you want to revoke this device? - + { + if (!open) { + onClose(); + } + }} + > + + + Revoke Device Access + + Are you sure you want to revoke this device? + + - - - - - + + + ); }; diff --git a/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx b/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx index efac1aef7b9..82f32cf75a6 100644 --- a/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx +++ b/apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx @@ -1,10 +1,10 @@ "use client"; +import { Button } from "@/components/ui/button"; import { type AuthorizedWallet, useRevokeAuthorizedWallet, } from "@3rdweb-sdk/react/hooks/useApi"; -import { useDisclosure } from "@chakra-ui/react"; import { createColumnHelper } from "@tanstack/react-table"; import { TWTable } from "components/shared/TWTable"; import { format } from "date-fns/format"; @@ -12,7 +12,6 @@ import { useTrack } from "hooks/analytics/useTrack"; import { useState } from "react"; import { toast } from "sonner"; import { isAddress } from "thirdweb/utils"; -import { Button, Text } from "tw-components"; import type { ComponentWithChildren } from "types/component-with-children"; import { shortenString } from "utils/usedapp-external"; import { AuthorizedWalletRevokeModal } from "./AuthorizedWalletRevokeModal"; @@ -33,7 +32,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren< const [revokeAuthorizedWalletId, setRevokeAuthorizedWalletId] = useState< string | undefined >(undefined); - const { onOpen, isOpen, onClose } = useDisclosure(); + const [isOpen, setIsOpen] = useState(false); const columns = [ columnHelper.accessor("deviceName", { @@ -44,9 +43,9 @@ export const AuthorizedWalletsTable: ComponentWithChildren< return; } if (isAddress(value)) { - return {shortenString(value, false)}; + return {shortenString(value, false)}; } - return {value}; + return {value}; }, }), @@ -59,7 +58,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren< return; } const createdDate = format(new Date(value), "MMM dd, yyyy"); - return {createdDate}; + return {createdDate}; }, }), @@ -73,8 +72,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren< return (