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

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating icon imports in various components, replacing some icons from `react-icons` with corresponding icons from `lucide-react`, and modifying the icon usage in the `HomePageCodeBlock`, `CustomContractForm`, `PublisherSocials`, `EventsFeedItem`, and `FileInput` components.

### Detailed summary
- Replaced `BsLightning` with `ZapIcon` in `HomePageCodeBlock`.
- Replaced `FiHelpCircle` with `InfoIcon` in `CustomContractForm`.
- Replaced `FiGlobe` with `GlobeIcon` in `PublisherSocials`.
- Replaced `FiCopy` with `CopyIcon` and `FiChevronDown` with `ChevronDownIcon` in `EventsFeedItem`.
- Replaced `FiUpload` with `UploadIcon` and `FiImage` with `ImageIcon` in `FileInput`.

> ✨ 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-deploy-form/custom-contract.tsx

@@ -23,11 +23,10 @@ import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { replaceTemplateValues } from "lib/deployment/template-values";
-import { CircleAlertIcon, ExternalLinkIcon } from "lucide-react";
+import { CircleAlertIcon, ExternalLinkIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useMemo } from "react";
 import { FormProvider, type UseFormReturn, useForm } from "react-hook-form";
-import { FiHelpCircle } from "react-icons/fi";
 import { ZERO_ADDRESS } from "thirdweb";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import {
@@ -856,7 +855,7 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                           <span className="tex-sm">
                             Deploy at a deterministic address
                           </span>
-                          <FiHelpCircle className="size-4" />
+                          <InfoIcon className="size-4" />
                         </div>
                       </ToolTipLabel>
                     </CheckboxWithLabel>

apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
+import { ButtonGroup, type ButtonGroupProps } from "@chakra-ui/react";
 import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
@@ -8,7 +8,7 @@ import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
 import { TelegramIcon } from "components/icons/brand-icons/TelegramIcon";
 import { XIcon } from "components/icons/brand-icons/XIcon";
 import type { ProfileMetadata } from "constants/schemas";
-import { FiGlobe } from "react-icons/fi";
+import { GlobeIcon } from "lucide-react";
 import { LinkButton, TrackedIconButton } from "tw-components";
 import { hostnameEndsWith } from "../../../utils/url";
 
@@ -80,7 +80,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         href={publisherProfile.website}
         bg="transparent"
         aria-label="website"
-        icon={<Icon as={FiGlobe} />}
+        icon={<GlobeIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="website"
       />

apps/dashboard/src/components/homepage/CodeBlock/index.tsx

@@ -3,16 +3,14 @@ import {
   Code,
   type CodeProps,
   Flex,
-  Icon,
   IconButton,
   useColorModeValue,
   useTheme,
 } from "@chakra-ui/react";
 import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, CopyIcon, ZapIcon } from "lucide-react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useEffect, useRef, useState } from "react";
-import { BsLightning } from "react-icons/bs";
 import { useInView } from "react-intersection-observer";
 import { Text } from "tw-components";
 
@@ -133,7 +131,7 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
               variant="ghost"
               colorScheme="gray"
               size="sm"
-              icon={<Icon as={BsLightning} />}
+              icon={<ZapIcon className="size-4" />}
             />
           ) : (
             <Box w="32px" />

apps/dashboard/src/components/shared/FileInput.tsx

@@ -2,7 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { EyeIcon, FilePlusIcon } from "lucide-react";
+import { EyeIcon, FilePlusIcon, ImageIcon, UploadIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback } from "react";
 import {
@@ -11,7 +11,6 @@ import {
   type FileRejection,
   useDropzone,
 } from "react-dropzone";
-import { FiImage, FiUpload } from "react-icons/fi";
 
 interface IFileInputProps {
   accept?: Accept;
@@ -127,7 +126,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
             )}
           >
             <div className="flex flex-col items-center gap-2 text-muted-foreground">
-              <FiUpload className="size-6" />
+              <UploadIcon className="size-6" />
               <p className="text-center text-sm">{isDisabledText}</p>
             </div>
           </div>
@@ -146,7 +145,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
           >
             {noDisplay ? (
               <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                <FiImage className="size-6" />
+                <ImageIcon className="size-6" />
                 <p className="text-sm">{fileType} uploaded</p>
               </div>
             ) : fileUrl ? (
@@ -162,7 +161,7 @@ export const FileInput: React.FC<IFileInputProps> = ({
             ) : (
               <div className="flex flex-col items-center gap-2.5 text-muted-foreground">
                 <div className="flex items-center justify-center rounded-full border border-border bg-background p-3">
-                  <FiUpload className="size-5" />
+                  <UploadIcon className="size-5" />
                 </div>
                 {!disableHelperText && (
                   <p className="text-center text-sm">

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

@@ -15,7 +15,6 @@ import {
   Divider,
   Flex,
   FormControl,
-  Icon,
   LightMode,
   List,
   Select,
@@ -26,10 +25,9 @@ import {
 } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
-import { CircleHelpIcon } from "lucide-react";
+import { ChevronDownIcon, CircleHelpIcon, CopyIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 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";
@@ -258,7 +256,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                     toast.info("Transaction hash copied.");
                   }}
                 >
-                  <Icon as={FiCopy} boxSize={3} />
+                  <CopyIcon className="size-4" />
                 </Button>
               </Tooltip>
               <Text fontFamily="mono" noOfLines={1}>
@@ -306,7 +304,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                 {transaction.blockNumber}
               </Text>
               <div>
-                <Icon as={FiChevronDown} />
+                <ChevronDownIcon className="size-4" />
               </div>
             </div>
           </Box>