[Dashboard] migrate authorized wallets components to shadcn (#7131)

## 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)*

<!-- start pr-codex -->

---

## 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}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

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

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jnsdls

.gitignore

@@ -31,4 +31,5 @@ storybook-static
 .aider*
 
 tsconfig.tsbuildinfo
-.cursor
+.cursor
+apps/dashboard/node-compile-cache

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 (
-    <ChakraProviderSetup>
-      <AuthorizedWalletsTable
-        authorizedWallets={authorizedWalletsQuery.data || []}
-        isPending={authorizedWalletsQuery.isPending}
-        isFetched={authorizedWalletsQuery.isFetched}
-      />
-    </ChakraProviderSetup>
+    <AuthorizedWalletsTable
+      authorizedWallets={authorizedWalletsQuery.data || []}
+      isPending={authorizedWalletsQuery.isPending}
+      isFetched={authorizedWalletsQuery.isFetched}
+    />
   );
 }

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 (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Are you sure you want to revoke this device?</ModalHeader>
-        <ModalCloseButton />
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <DialogContent className="p-0">
+        <DialogHeader className="p-6">
+          <DialogTitle>Revoke Device Access</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Are you sure you want to revoke this device?
+          </DialogDescription>
+        </DialogHeader>
 
-        <ModalFooter>
-          <Button mr={3} onClick={onClose} variant="ghost">
+        <DialogFooter className="gap-4 border-border border-t bg-card p-6">
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
+            variant="destructive"
             onClick={() => onSubmit(authorizedWalletId)}
-            variant="outline"
-            colorScheme="red"
           >
             Revoke
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

apps/dashboard/src/components/settings/AuthorizedWallets/AuthorizedWalletsTable.tsx

@@ -1,18 +1,17 @@
 "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";
 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 <Text>{shortenString(value, false)}</Text>;
+          return <span className="text-sm">{shortenString(value, false)}</span>;
         }
-        return <Text>{value}</Text>;
+        return <span className="text-sm">{value}</span>;
       },
     }),
 
@@ -59,7 +58,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren<
           return;
         }
         const createdDate = format(new Date(value), "MMM dd, yyyy");
-        return <Text>{createdDate}</Text>;
+        return <span className="text-sm">{createdDate}</span>;
       },
     }),
 
@@ -73,8 +72,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren<
         return (
           <Button
             onClick={() => handleOpen(value)}
-            variant="outline"
-            color="red"
+            variant="destructive"
             size="sm"
           >
             Revoke Access
@@ -86,11 +84,11 @@ export const AuthorizedWalletsTable: ComponentWithChildren<
 
   const handleOpen = (authorizedWalletId: AuthorizedWallet["id"]) => {
     setRevokeAuthorizedWalletId(authorizedWalletId);
-    onOpen();
+    setIsOpen(true);
   };
 
   const handleClose = () => {
-    onClose();
+    setIsOpen(false);
     setRevokeAuthorizedWalletId(undefined);
   };