[Dashboard] migrate authorized wallets components to shadcn

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,11 @@
+import { Button } from "@/components/ui/button";
 import {
-  Modal,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from "@chakra-ui/react";
-import { Button } from "tw-components";
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 type AuthorizedWalletRevokeModalProps = {
   isOpen: boolean;
@@ -19,25 +18,33 @@ 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 className="font-semibold text-2xl tracking-tight">
+            Are you sure you want to revoke this device?
+          </DialogTitle>
+        </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);
   };