[Dashboard] Remove react-icons (1) (#5005)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing several instances of icon imports from `react-icons` with new icons from `lucide-react` across various components in the project, enhancing the consistency and modern look of the UI.

### Detailed summary
- Replaced `AiOutlineInfoCircle` with `CirclePlusIcon` in `FormItem.tsx`.
- Replaced `AiOutlinePlusCircle` with `CirclePlusIcon` in multiple buttons: `AddAdminButton`, `AddAccessTokenButton`, `AddKeypairButton`, `AddWebhookButton`, `AddRelayerButton`, `AddContractSubscriptionButton`.
- Updated icons in `SettingDetectedState` from `VscExtensions` to `Grid2x2XIcon` and `FiExternalLink` to `ExternalLinkIcon`.
- Replaced `BsShieldFillCheck` with `ShieldCheckIcon` and `FiArrowRight` with `MoveRightIcon` in `PublishedContractTable`.
- Updated `ModalSizeButton` to use `ListIcon` and `Rows3Icon` instead of `FaRectangleList` and `RiFileListFill`.
- In `PublishedContract`, replaced icons: `BiPencil` with `PencilIcon`, `VscCalendar` with `CalendarDaysIcon`, `VscBook` with `BookOpenTextIcon`, and `VscServer` with `ServerIcon`.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx

@@ -1,7 +1,6 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
   Flex,
-  Icon,
   Image,
   Spinner,
   Table,
@@ -17,10 +16,9 @@ import { ChakraNextImage } from "components/Image";
 import { replaceDeployerAddress } from "components/explore/publisher";
 import { useTrack } from "hooks/analytics/useTrack";
 import { replaceIpfsUrl } from "lib/sdk";
+import { MoveRightIcon, ShieldCheckIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
-import { BsShieldFillCheck } from "react-icons/bs";
-import { FiArrowRight } from "react-icons/fi";
 import { type Column, type Row, useTable } from "react-table";
 import {
   Card,
@@ -139,7 +137,7 @@ export const PublishedContractTable: ComponentWithChildren<
                   aria-label="Audited contract"
                   colorScheme="green"
                   variant="ghost"
-                  icon={<Icon as={BsShieldFillCheck} boxSize={4} />}
+                  icon={<ShieldCheckIcon className="size-4" />}
                   onClick={(e) => {
                     e.stopPropagation();
                     trackEvent({
@@ -255,7 +253,7 @@ const ContractTableRow: React.FC<ContractTableRowProps> = ({ row }) => {
           </Td>
         ))}
         <Td borderBottomColor="borderColor" borderBottomWidth="inherit">
-          <Icon color="var(--rowIconColor)" as={FiArrowRight} />
+          <MoveRightIcon className="size-4" />
         </Td>
       </Tr>
     </>

apps/dashboard/src/components/contract-components/published-contract/index.tsx

@@ -1,23 +1,20 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  Divider,
-  Flex,
-  GridItem,
-  Icon,
-  List,
-  ListItem,
-} from "@chakra-ui/react";
+import { Divider, Flex, GridItem, List, ListItem } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { ContractFunctionsOverview } from "components/contract-functions/contract-functions";
 import { format } from "date-fns/format";
 import { correctAndUniqueLicenses } from "lib/licenses";
 import { replaceIpfsUrl } from "lib/sdk";
-import { ShieldCheckIcon } from "lucide-react";
+import {
+  BookOpenTextIcon,
+  CalendarDaysIcon,
+  PencilIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from "lucide-react";
 import { useMemo } from "react";
-import { BiPencil } from "react-icons/bi";
-import { VscBook, VscCalendar, VscServer } from "react-icons/vsc";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import { download } from "thirdweb/storage";
@@ -112,7 +109,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
               ml="auto"
               size="sm"
               variant="outline"
-              leftIcon={<Icon as={BiPencil} />}
+              leftIcon={<PencilIcon className="size-3" />}
               href={`/contracts/publish/${encodeURIComponent(
                 publishedContract.publishMetadataUri.replace("ipfs://", ""),
               )}`}
@@ -166,7 +163,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
                 {publishedContract.publishTimestamp && (
                   <ListItem>
                     <Flex gap={2} alignItems="flex-start">
-                      <Icon color="paragraph" as={VscCalendar} boxSize={5} />
+                      <CalendarDaysIcon className="size-5 text-muted-foreground" />
                       <Flex direction="column" gap={1}>
                         <Heading as="h5" size="label.sm">
                           Publish Date
@@ -208,7 +205,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
                 )}
                 <ListItem>
                   <Flex gap={2} alignItems="flex-start">
-                    <Icon color="paragraph" as={VscBook} boxSize={5} />
+                    <BookOpenTextIcon className="size-5 text-muted-foreground" />
                     <Flex direction="column" gap={1}>
                       <Heading as="h5" size="label.sm">
                         License
@@ -226,7 +223,7 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
                   hasFactoryAddresses) ? (
                   <ListItem>
                     <Flex gap={2} alignItems="flex-start">
-                      <Icon color="paragraph" as={VscServer} boxSize={5} />
+                      <ServerIcon className="size-5 text-muted-foreground" />
                       <Flex direction="column" gap={1}>
                         <Heading as="h5" size="label.sm">
                           {publishedContract?.isDeployableViaFactory

apps/dashboard/src/components/engine/configuration/add-webhook-button.tsx

@@ -5,7 +5,6 @@ import {
 import {
   Flex,
   FormControl,
-  Icon,
   Input,
   Modal,
   ModalBody,
@@ -19,8 +18,8 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { Button, FormLabel } from "tw-components";
 import { beautifyString } from "./webhooks-table";
 
@@ -57,7 +56,7 @@ export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
         onClick={onOpen}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx

@@ -12,7 +12,6 @@ import {
   Collapse,
   Flex,
   FormControl,
-  Icon,
   Input,
   Modal,
   ModalBody,
@@ -30,9 +29,9 @@ import {
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useV5DashboardChain } from "lib/v5-adapter";
+import { CirclePlusIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { getContract, isAddress } from "thirdweb";
 import {
   Button,
@@ -59,7 +58,7 @@ export const AddContractSubscriptionButton: React.FC<
         onClick={disclosure.onOpen}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/engine/permissions/add-access-token-button.tsx

@@ -1,7 +1,6 @@
 import { useEngineCreateAccessToken } from "@3rdweb-sdk/react/hooks/useEngine";
 import {
   Flex,
-  Icon,
   Modal,
   ModalBody,
   ModalContent,
@@ -12,8 +11,8 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
 import { useState } from "react";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { Button, Checkbox, CodeBlock, Text } from "tw-components";
 
 interface AddAccessTokenButtonProps {
@@ -64,7 +63,7 @@ export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
         }}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/engine/permissions/add-admin-button.tsx

@@ -5,7 +5,6 @@ import {
 import {
   Flex,
   FormControl,
-  Icon,
   Input,
   Modal,
   ModalBody,
@@ -18,8 +17,8 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { isAddress } from "thirdweb";
 import { Button, FormLabel } from "tw-components";
 
@@ -50,7 +49,7 @@ export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
         onClick={onOpen}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx

@@ -6,7 +6,6 @@ import {
   Alert,
   Flex,
   FormControl,
-  Icon,
   Input,
   Modal,
   ModalBody,
@@ -20,8 +19,8 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
 import { useState } from "react";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { Button, CodeBlock, FormLabel, Text } from "tw-components";
 
 const KEYPAIR_ALGORITHM_DETAILS: Record<
@@ -108,7 +107,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
         onClick={onOpen}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx

@@ -7,7 +7,6 @@ import {
 import {
   Flex,
   FormControl,
-  Icon,
   Input,
   Modal,
   ModalBody,
@@ -24,8 +23,8 @@ import {
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
-import { AiOutlinePlusCircle } from "react-icons/ai";
 import { isAddress, shortenAddress } from "thirdweb/utils";
 import { Button, FormHelperText, FormLabel } from "tw-components";
 
@@ -44,7 +43,7 @@ export const AddRelayerButton: React.FC<AddRelayerButtonProps> = ({
         onClick={disclosure.onOpen}
         variant="ghost"
         size="sm"
-        leftIcon={<Icon as={AiOutlinePlusCircle} boxSize={6} />}
+        leftIcon={<CirclePlusIcon className="size-6" />}
         colorScheme="primary"
         w="fit-content"
       >

apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx

@@ -1,5 +1,5 @@
 import { Flex, FormControl, Tooltip } from "@chakra-ui/react";
-import { AiOutlineInfoCircle } from "react-icons/ai";
+import { CirclePlusIcon } from "lucide-react";
 import { FormLabel } from "tw-components";
 
 export const FormItem: React.FC<{
@@ -26,7 +26,7 @@ export const FormItem: React.FC<{
               label={<div>{props.description}</div>}
             >
               <div>
-                <AiOutlineInfoCircle className="text-muted-foreground" />
+                <CirclePlusIcon className="size-5 text-muted-foreground" />
               </div>
             </Tooltip>
           )}

apps/dashboard/src/components/wallets/ConnectWalletPlayground/ModalSizeButton.tsx

@@ -1,7 +1,7 @@
-import { Icon, IconButton, Tooltip } from "@chakra-ui/react";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { IconButton } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { FaRectangleList } from "react-icons/fa6";
-import { RiFileListFill } from "react-icons/ri";
+import { ListIcon, Rows3Icon } from "lucide-react";
 
 export function ModalSizeButton(props: {
   modalSize: "compact" | "wide";
@@ -12,7 +12,7 @@ export function ModalSizeButton(props: {
 }) {
   const trackEvent = useTrack();
   return (
-    <Tooltip label={props.modalSize === "wide" ? "Wide" : "Compact"}>
+    <ToolTipLabel label={props.modalSize === "wide" ? "Wide" : "Compact"}>
       <IconButton
         w={10}
         h={10}
@@ -26,11 +26,11 @@ export function ModalSizeButton(props: {
         color={props.isSelected ? "blue.500" : "heading"}
         borderColor={props.isSelected ? "blue.500" : "gray.800"}
         icon={
-          <Icon
-            as={props.modalSize === "wide" ? FaRectangleList : RiFileListFill}
-            width={5}
-            height={5}
-          />
+          props.modalSize === "wide" ? (
+            <ListIcon className="size-5" />
+          ) : (
+            <Rows3Icon className="size-5" />
+          )
         }
         onClick={() => {
           props.onClick();
@@ -43,6 +43,6 @@ export function ModalSizeButton(props: {
           });
         }}
       />
-    </Tooltip>
+    </ToolTipLabel>
   );
 }