[Dashboard] Remove react-icons (4) (#4900)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating various components in the dashboard to replace certain icon imports with `lucide-react` icons, enhancing the UI consistency and modernizing the iconography used throughout the application.

### Detailed summary
- Replaced `BiTransferAlt` with `ArrowLeftRightIcon` in `TransactionButton`.
- Replaced `IoChevronBack` with `ChevronLeftIcon` in `TokenIdPage`.
- Replaced `RiCheckboxMultipleBlankLine` with `FileStackIcon` in `BatchLazyMintButton`.
- Replaced `VscDebugDisconnect` with `UnplugIcon` in `MismatchButton`.
- Replaced `FiCopy` with `CopyIcon` in `PermissionsTable`.
- Replaced `FiCheckCircle` and `FiXCircle` with `CircleCheckIcon` and `CircleXIcon` in `VerifyContractModal`.
- Replaced `FiUpload` with `UploadIcon` in `AirdropTab`.
- Updated various components to use `lucide-react` icons instead of `react-icons`.
- Improved layout and styling in `AirdropUpload` and `AirdropTable` components.

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

<!-- end pr-codex -->

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -15,7 +15,6 @@ import { cn } from "@/lib/utils";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import {
   Box,
-  Icon,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -34,11 +33,10 @@ import type {
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { LOCAL_NODE_PKEY } from "constants/misc";
 import { useTrack } from "hooks/analytics/useTrack";
-import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
+import { ExternalLinkIcon, TriangleAlertIcon, UnplugIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
-import { VscDebugDisconnect } from "react-icons/vsc";
 import { toast } from "sonner";
 import { prepareTransaction, sendTransaction, toWei } from "thirdweb";
 import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains";
@@ -461,7 +459,7 @@ const MismatchNotice: React.FC<{
 
       <Button
         ref={actuallyCanAttemptSwitch ? initialFocusRef : undefined}
-        leftIcon={<Icon as={VscDebugDisconnect} />}
+        leftIcon={<UnplugIcon className="size-4" />}
         size="sm"
         onClick={onSwitchWallet}
         isLoading={connectionStatus === "connecting"}

apps/dashboard/src/components/buttons/TransactionButton.tsx

@@ -12,8 +12,8 @@ import {
 } from "@chakra-ui/react";
 import { CHAIN_ID_TO_GNOSIS } from "constants/mappings";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
+import { ArrowLeftRightIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { BiTransferAlt } from "react-icons/bi";
 import { FiInfo } from "react-icons/fi";
 import {
   useActiveAccount,
@@ -154,7 +154,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                 <Text color="inherit" size="label.md" fontFamily="mono">
                   {transactionCount}
                 </Text>
-                <BiTransferAlt />
+                <ArrowLeftRightIcon className="size-3" />
               </Flex>
             </Center>
           </ToolTipLabel>

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-tab.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { Flex, Icon, useDisclosure } from "@chakra-ui/react";
+import { Flex, useDisclosure } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import {
   type AirdropAddressInput,
   AirdropUpload,
 } from "contract-ui/tabs/nfts/components/airdrop-upload";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { UploadIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { BsCircleFill } from "react-icons/bs";
-import { FiUpload } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
@@ -125,7 +124,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 colorScheme="primary"
                 borderRadius="md"
                 onClick={onOpen}
-                rightIcon={<Icon as={FiUpload} />}
+                rightIcon={<UploadIcon className="size-5" />}
               >
                 Upload addresses
               </Button>
@@ -138,13 +137,10 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
                 color={addresses.length === 0 ? "orange.500" : "green.500"}
               >
                 {addresses.length > 0 && (
-                  <>
-                    <Icon as={BsCircleFill} boxSize={2} />
-                    <Text size="body.sm" color="inherit">
-                      <strong>{addresses.length} addresses</strong> ready to be
-                      airdropped
-                    </Text>
-                  </>
+                  <Text size="body.sm" color="inherit">
+                    ● <strong>{addresses.length} addresses</strong> ready to be
+                    airdropped
+                  </Text>
                 )}
               </Flex>
             </Flex>

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx

@@ -204,28 +204,33 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
                 <div className="relative aspect-[21/9] w-full">
                   <div
                     className={cn(
-                      "h-full cursor-pointer rounded-md border border-border hover:border-primary",
+                      "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
                       noCsv ? "bg-red-200" : "bg-card",
                     )}
                     {...getRootProps()}
                   >
                     <input {...getInputProps()} />
-                    <div className="flex flex-col p-6">
+                    <div className="m-auto flex flex-col p-6">
                       <UploadIcon
                         size={16}
                         className={cn("mx-auto mb-2 text-gray-500", {
                           "text-red-500": noCsv,
                         })}
                       />
                       {isDragActive ? (
-                        <Heading as={Text} size="label.md">
+                        <Heading
+                          as={Text}
+                          size="label.md"
+                          className="text-center"
+                        >
                           Drop the files here
                         </Heading>
                       ) : (
                         <Heading
                           as={Text}
                           size="label.md"
                           color={noCsv ? "red.500" : "gray.600"}
+                          className="text-center"
                         >
                           {noCsv
                             ? `No valid CSV file found, make sure your CSV includes the "address" column.`
@@ -439,7 +444,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
       </TableContainer>
       <Portal containerRef={portalRef}>
         <div className="flex w-full items-center justify-center">
-          <div className="flex flex-row">
+          <div className="flex flex-row gap-1">
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
@@ -452,10 +457,10 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
               icon={<ChevronLeftIcon className="size-4" />}
               onClick={() => previousPage()}
             />
-            <Text whiteSpace="nowrap">
+            <p className="my-auto whitespace-nowrap">
               Page <strong>{pageIndex + 1}</strong> of{" "}
               <strong>{pageOptions.length}</strong>
-            </Text>
+            </p>
             <IconButton
               isDisabled={!canNextPage}
               aria-label="next page"

apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { BatchLazyMint } from "core-ui/batch-upload/batch-lazy-mint";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { RiCheckboxMultipleBlankLine } from "react-icons/ri";
+import { FileStackIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
@@ -120,7 +120,7 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={RiCheckboxMultipleBlankLine} />}
+        leftIcon={<FileStackIcon className="size-4" />}
         onClick={onOpen}
       >
         Batch Upload

apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx

@@ -4,7 +4,6 @@ import { WalletAddress } from "@/components/blocks/wallet-address";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   Flex,
-  Icon,
   IconButton,
   Select,
   Skeleton,
@@ -18,14 +17,14 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
-import { useEffect, useMemo, useState } from "react";
-import { FiArrowRight } from "react-icons/fi";
 import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
+  ArrowRightIcon,
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
 import {
   type CellProps,
   type Column,
@@ -294,7 +293,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                     </Td>
                   ))}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
-                    {!failedToLoad && <Icon as={FiArrowRight} />}
+                    {!failedToLoad && <ArrowRightIcon className="size-4" />}
                   </Td>
                 </Tr>
               );
@@ -325,17 +324,17 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
         </Table>
       </TableContainer>
       <div className="flex w-full items-center justify-center">
-        <Flex gap={2} direction="row" align="center">
+        <div className="flex flex-row items-center gap-1">
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
             aria-label="first page"
-            icon={<Icon as={MdFirstPage} />}
+            icon={<ChevronFirstIcon className="size-4" />}
             onClick={() => gotoPage(0)}
           />
           <IconButton
             isDisabled={!canPreviousPage || queryLoading}
             aria-label="previous page"
-            icon={<Icon as={MdNavigateBefore} />}
+            icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
           <Text whiteSpace="nowrap">
@@ -347,13 +346,13 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
           <IconButton
             isDisabled={!canNextPage || queryLoading}
             aria-label="next page"
-            icon={<Icon as={MdNavigateNext} />}
+            icon={<ChevronRightIcon className="size-4" />}
             onClick={() => nextPage()}
           />
           <IconButton
             isDisabled={!canNextPage || queryLoading}
             aria-label="last page"
-            icon={<Icon as={MdLastPage} />}
+            icon={<ChevronLastIcon className="size-4" />}
             onClick={() => gotoPage(pageCount - 1)}
           />
 
@@ -370,7 +369,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
             <option value="250">250</option>
             <option value="500">500</option>
           </Select>
-        </Flex>
+        </div>
       </div>
     </Flex>
   );

apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx

@@ -9,15 +9,14 @@ import {
   Divider,
   Flex,
   GridItem,
-  Icon,
   IconButton,
   SimpleGrid,
   Tooltip,
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useNFTDrawerTabs } from "core-ui/nft-drawer/useNftDrawerTabs";
+import { ChevronLeftIcon } from "lucide-react";
 import { useState } from "react";
-import { IoChevronBack } from "react-icons/io5";
 import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
@@ -115,7 +114,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                 router.push(`/${chainSlug}/${contract.address}/nfts`)
               }
               aria-label="Back"
-              icon={<Icon as={IoChevronBack} boxSize={6} />}
+              icon={<ChevronLeftIcon className="size-6" />}
             >
               Back
             </IconButton>

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

@@ -1,16 +1,9 @@
-import {
-  Box,
-  Flex,
-  Icon,
-  List,
-  SimpleGrid,
-  Tag,
-  Tooltip,
-} from "@chakra-ui/react";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { Box, Flex, List, SimpleGrid, Tag } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
+import { CopyIcon } from "lucide-react";
 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";
@@ -164,16 +157,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
       >
         <Box gridColumn="span 2">
           <div className="flex flex-row items-center gap-3">
-            <Tooltip
-              p={0}
-              bg="transparent"
-              boxShadow="none"
-              label={
-                <Card py={2} px={4} bgColor="backgroundHighlight">
-                  <Text size="label.sm">Copy address to clipboard</Text>
-                </Card>
-              }
-            >
+            <ToolTipLabel label="Copy address to clipboard">
               <Button
                 size="sm"
                 bg="transparent"
@@ -182,9 +166,9 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
                   toast.info("Address copied.");
                 }}
               >
-                <Icon as={FiCopy} boxSize={3} />
+                <CopyIcon className="size-3" />
               </Button>
-            </Tooltip>
+            </ToolTipLabel>
             <Text fontFamily="mono" noOfLines={1}>
               {shortenIfAddress(data.member)}
             </Text>