[Dashboard] Remove chakra useToast (#4802)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of `useToast` from `@chakra-ui/react` with `toast` from `sonner` for displaying notifications across various components in the dashboard. This change aims to streamline the notification handling.

### Detailed summary
- Removed `useToast` from multiple components.
- Replaced toast notifications with `toast.info`, `toast.success`, and `toast.error` methods from `sonner`.
- Updated the `AddressCopyButton`, `PermissionsTable`, `LatestEvents`, `IpfsUploadDropzone`, and `AuthorizedWalletsTable` components to reflect these changes.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/.eslintrc.js

@@ -58,6 +58,8 @@ module.exports = {
               "VStack",
               "HStack",
               "AspectRatio",
+              "useToast",
+              "useClipboard",
               // also the types
               "ButtonProps",
               "BadgeProps",

apps/dashboard/src/components/ipfs-upload/dropzone.tsx

@@ -16,7 +16,6 @@ import {
   SimpleGrid,
   Tooltip,
   chakra,
-  useToast,
 } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { PINNED_FILES_QUERY_KEY_ROOT } from "components/storage/your-files";
@@ -27,6 +26,7 @@ import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { BsFillCloudUploadFill } from "react-icons/bs";
 import { FiExternalLink, FiTrash2, FiUploadCloud } from "react-icons/fi";
+import { toast } from "sonner";
 import { MediaRenderer } from "thirdweb/react";
 import { useActiveAccount } from "thirdweb/react";
 import {
@@ -45,7 +45,6 @@ const TRACKING_CATEGORY = "ipfs_uploader";
 const UNACCEPTED_FILE_TYPES = ["text/html"];
 
 export const IpfsUploadDropzone: React.FC = () => {
-  const toast = useToast();
   const address = useActiveAccount()?.address;
 
   const [droppedFiles, setDroppedFiles] = useState<File[]>([]);
@@ -56,13 +55,8 @@ export const IpfsUploadDropzone: React.FC = () => {
         UNACCEPTED_FILE_TYPES.includes(f.type),
       );
       if (invalidFiles.length) {
-        const description = `${invalidFiles.length} ${invalidFiles.length > 1 ? "files have" : "file has"} been removed from the list. Uploading ${UNACCEPTED_FILE_TYPES.join(", ")} files is restricted.`;
-        toast({
-          title: "Error",
-          description,
-          status: "error",
-          isClosable: true,
-          duration: 6000,
+        toast.error("Error", {
+          description: `${invalidFiles.length} ${invalidFiles.length > 1 ? "files have" : "file has"} been removed from the list. Uploading ${UNACCEPTED_FILE_TYPES.join(", ")} files is restricted.`,
         });
       }
       setDroppedFiles((prev) => [

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

@@ -2,12 +2,13 @@ import {
   type AuthorizedWallet,
   useRevokeAuthorizedWallet,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { useDisclosure, useToast } from "@chakra-ui/react";
+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";
@@ -25,7 +26,6 @@ const columnHelper = createColumnHelper<AuthorizedWallet>();
 export const AuthorizedWalletsTable: ComponentWithChildren<
   AuthorizedWalletsTableProps
 > = ({ authorizedWallets, isPending, isFetched }) => {
-  const toast = useToast();
   const trackEvent = useTrack();
   const { mutateAsync: revokeAccess } = useRevokeAuthorizedWallet();
   const [revokeAuthorizedWalletId, setRevokeAuthorizedWalletId] = useState<
@@ -110,13 +110,7 @@ export const AuthorizedWalletsTable: ComponentWithChildren<
         action: "revoke-access-to-device",
         label: "success",
       });
-      toast({
-        title: "Device revoked",
-        description: "The selected device has been revoked.",
-        status: "success",
-        duration: 5000,
-        isClosable: true,
-      });
+      toast.success("The selected device has been revoked.");
     } catch (error) {
       console.error(error);
       trackEvent({
@@ -125,13 +119,9 @@ export const AuthorizedWalletsTable: ComponentWithChildren<
         label: "error",
         error,
       });
-      toast({
-        title: "Something went wrong while revoking the device",
+      toast.error("Something went wrong while revoking the device", {
         description:
-          "Something went wrong while revoking the device. Please visit our support site: https://thirdweb.com/support",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
+          "Please visit our support site: https://thirdweb.com/support",
       });
     } finally {
       handleClose();

apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx

@@ -22,7 +22,6 @@ import {
   Stack,
   Switch,
   Tooltip,
-  useToast,
 } from "@chakra-ui/react";
 import { AiOutlineQuestionCircle } from "@react-icons/all-files/ai/AiOutlineQuestionCircle";
 import { AnimatePresence, motion } from "framer-motion";
@@ -31,6 +30,7 @@ import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { Fragment, useMemo, useState } from "react";
 import { FiChevronDown, FiCopy } from "react-icons/fi";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { stringify } from "thirdweb/utils";
 import {
@@ -191,7 +191,6 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
   contractAddress,
   chainSlug,
 }) => {
-  const toast = useToast();
   const { onCopy } = useClipboard(transaction.transactionHash);
 
   const router = useRouter();
@@ -257,14 +256,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                   bg="transparent"
                   onClick={() => {
                     onCopy();
-                    toast({
-                      variant: "solid",
-                      position: "bottom",
-                      title: "Transaction hash copied.",
-                      status: "success",
-                      duration: 5000,
-                      isClosable: true,
-                    });
+                    toast.info("Transaction hash copied.");
                   }}
                 >
                   <Icon as={FiCopy} boxSize={3} />

apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx

@@ -12,13 +12,13 @@ import {
   Spinner,
   Stack,
   Tooltip,
-  useToast,
 } from "@chakra-ui/react";
 import { useTabHref } from "contract-ui/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
 import { useState } from "react";
 import { FiCopy } from "react-icons/fi";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import {
   Button,
@@ -109,7 +109,6 @@ interface EventsFeedItemProps {
 }
 
 const EventsFeedItem: React.FC<EventsFeedItemProps> = ({ transaction }) => {
-  const toast = useToast();
   const { onCopy } = useClipboard(transaction.transactionHash);
 
   const href = useTabHref("events");
@@ -170,14 +169,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({ transaction }) => {
                 bg="transparent"
                 onClick={() => {
                   onCopy();
-                  toast({
-                    variant: "solid",
-                    position: "bottom",
-                    title: "Transaction hash copied.",
-                    status: "success",
-                    duration: 5000,
-                    isClosable: true,
-                  });
+                  toast.info("Transaction hash copied.");
                 }}
               >
                 <Icon as={FiCopy} boxSize={3} />

apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx

@@ -7,13 +7,13 @@ import {
   Stack,
   Tag,
   Tooltip,
-  useToast,
 } from "@chakra-ui/react";
 import { useTabHref } from "contract-ui/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
 import { useMemo } from "react";
 import { FiCopy } from "react-icons/fi";
+import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { useReadContract } from "thirdweb/react";
 import {
@@ -126,7 +126,6 @@ interface PermissionsItemProps {
 }
 
 const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
-  const toast = useToast();
   const { onCopy } = useClipboard(data.member);
 
   return (
@@ -183,14 +182,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
                 bg="transparent"
                 onClick={() => {
                   onCopy();
-                  toast({
-                    variant: "solid",
-                    position: "bottom",
-                    title: "Address copied.",
-                    status: "success",
-                    duration: 5000,
-                    isClosable: true,
-                  });
+                  toast.info("Address copied.");
                 }}
               >
                 <Icon as={FiCopy} boxSize={3} />

apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx

@@ -13,14 +13,14 @@ import {
   InputRightAddon,
   Stack,
   Tooltip,
-  useToast,
 } from "@chakra-ui/react";
 import { DelayedDisplay } from "components/delayed-display/delayed-display";
 import { useClipboard } from "hooks/useClipboard";
 import { useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { BiPaste } from "react-icons/bi";
 import { FiCopy, FiInfo, FiPlus, FiTrash } from "react-icons/fi";
+import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS, isAddress } from "thirdweb";
 import { Button, FormErrorMessage, Text } from "tw-components";
 
@@ -172,8 +172,6 @@ const PermissionAddress: React.FC<PermissionAddressProps> = ({
   isSubmitting,
   contract,
 }) => {
-  const toast = useToast();
-
   const { onCopy } = useClipboard(member);
 
   return (
@@ -193,14 +191,7 @@ const PermissionAddress: React.FC<PermissionAddressProps> = ({
                 e.stopPropagation();
                 e.preventDefault();
                 onCopy();
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: "Address copied.",
-                  status: "success",
-                  duration: 5000,
-                  isClosable: true,
-                });
+                toast.info("Address copied.");
               }}
             />
           </Tooltip>

apps/dashboard/src/tw-components/AddressCopyButton.tsx

@@ -1,7 +1,8 @@
-import { Icon, Tooltip, useToast } from "@chakra-ui/react";
+import { Icon, Tooltip } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
 import { FiCopy } from "react-icons/fi";
+import { toast } from "sonner";
 import {
   Button,
   type ButtonProps,
@@ -47,7 +48,6 @@ export const AddressCopyButton: React.FC<AddressCopyButtonProps> = ({
   const { onCopy } = useClipboard(address || "");
 
   const trackEvent = useTrack();
-  const toast = useToast();
 
   return (
     <Tooltip
@@ -70,14 +70,9 @@ export const AddressCopyButton: React.FC<AddressCopyButtonProps> = ({
           e.stopPropagation();
           e.preventDefault();
           onCopy();
-          toast({
-            variant: "solid",
-            position: "bottom",
-            title: `${title.charAt(0).toUpperCase() + title.slice(1)} copied.`,
-            status: "success",
-            duration: 5000,
-            isClosable: true,
-          });
+          toast.info(
+            `${title.charAt(0).toUpperCase() + title.slice(1)} copied.`,
+          );
           if (title === "Token ID") {
             trackEvent({
               category: "tokenid_button",