From 6ff85d32c5445884a3cfab11c816bdacff17fb67 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Thu, 3 Oct 2024 16:07:58 +0000
Subject: [PATCH] [Dashboard] Remove react-icons (3) (#4898)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating icon imports from `react-icons` to `lucide-react` across multiple components, enhancing consistency and potentially improving performance.

### Detailed summary
- Replaced `FiX` with `XIcon` in `SmartWalletsBillingAlert`.
- Replaced `CircleAlert` with `CircleAlertIcon` in `AirdropTable`.
- Replaced `FiUpload` with `UploadIcon` in `IconUpload`.
- Updated `HackathonEarnFooter` to use `SearchIcon`.
- Replaced `BsLightningCharge` with `ZapIcon` in `Community`.
- Replaced `IoAlertCircleOutline` with `CircleAlertIcon` in `AirdropTable`.
- Updated pagination icons in `AirdropTable` to use `Chevron` icons from `lucide-react`.

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

<!-- end pr-codex -->
---
 .../configure-networks/Form/IconUpload.tsx    |  4 +--
 .../hackathon/HacakthonEarnFooter.tsx         | 15 +++--------
 .../components/settings/ApiKeys/Alerts.tsx    |  4 +--
 .../tabs/nfts/components/airdrop-upload.tsx   | 27 +++++++++----------
 .../components/airdrop-upload-erc20.tsx       |  4 +--
 apps/dashboard/src/pages/community/index.tsx  |  8 +++---
 6 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
index f917efb41c8..74696657ca3 100644
--- a/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
+++ b/apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx
@@ -4,7 +4,7 @@ import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardS
 import { useQueryClient } from "@tanstack/react-query";
 import { FileInput } from "components/shared/FileInput";
 import { PINNED_FILES_QUERY_KEY_ROOT } from "components/storage/your-files";
-import { FiUpload } from "react-icons/fi";
+import { UploadIcon } from "lucide-react";
 import { toast } from "sonner";
 
 export const IconUpload: React.FC<{ onUpload: (url: string) => void }> = ({
@@ -50,7 +50,7 @@ export const IconUpload: React.FC<{ onUpload: (url: string) => void }> = ({
         {storageUpload.isPending ? (
           <Spinner className="size-3" />
         ) : (
-          <FiUpload className="size-3" />
+          <UploadIcon className="size-3" />
         )}
       </Button>
     </FileInput>
diff --git a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
index 5cc8d101b9f..f188060c256 100644
--- a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
+++ b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
@@ -1,8 +1,6 @@
-import { Flex, Icon } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
-import { WandIcon } from "lucide-react";
-import { FiSearch } from "react-icons/fi";
+import { SearchIcon, WandIcon } from "lucide-react";
 import { Heading, LinkButton } from "tw-components";
 
 interface HackathonEarnFooterProps {
@@ -42,12 +40,7 @@ export const HackathonEarnFooter = ({
         FEBRUARY 27 — MARCH 16
       </Heading>
 
-      <Flex
-        alignItems="center"
-        justifyContent="center"
-        gap="20px"
-        flexWrap="wrap"
-      >
+      <div className="flex flex-row flex-wrap items-center justify-center gap-5">
         <LinkButton
           href="https://hackathons.deform.cc/thirdweb"
           onClick={() =>
@@ -85,7 +78,7 @@ export const HackathonEarnFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={FiSearch} />}
+          leftIcon={<SearchIcon className="size-5" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
@@ -97,7 +90,7 @@ export const HackathonEarnFooter = ({
         >
           Submission
         </LinkButton>
-      </Flex>
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
index bbd8d2a48e1..2947c62a05c 100644
--- a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
+++ b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
@@ -7,7 +7,7 @@ import {
   IconButton,
 } from "@chakra-ui/react";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { FiX } from "react-icons/fi";
+import { XIcon } from "lucide-react";
 import { Text, TrackedLink } from "tw-components";
 
 export const SmartWalletsBillingAlert = ({
@@ -66,7 +66,7 @@ export const SmartWalletsBillingAlert = ({
         <IconButton
           size="xs"
           aria-label="Close notice"
-          icon={<FiX />}
+          icon={<XIcon className="size-4" />}
           colorScheme="blackAlpha"
           color="white"
           variant="ghost"
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
index 643a8803e53..28d94aba6fe 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   Container,
   Flex,
-  Icon,
   IconButton,
   Link,
   Portal,
@@ -20,17 +19,17 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { Logo } from "components/logo";
-import { UploadIcon } from "lucide-react";
+import {
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CircleAlertIcon,
+  UploadIcon,
+} from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type DropzoneOptions, useDropzone } from "react-dropzone";
-import { IoAlertCircleOutline } from "react-icons/io5";
-import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
 import { type Column, usePagination, useTable } from "react-table";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import { isAddress } from "thirdweb/utils";
@@ -340,7 +339,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
                 }
               >
                 <div className="flex flex-row items-center gap-2">
-                  <Icon as={IoAlertCircleOutline} color="red.500" boxSize={5} />
+                  <CircleAlertIcon className="size-5 text-red-500" />
                   <Text fontWeight="bold" color="red.500" cursor="default">
                     {address}
                   </Text>
@@ -444,13 +443,13 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
-              icon={<Icon as={MdFirstPage} />}
+              icon={<ChevronFirstIcon className="size-4" />}
               onClick={() => gotoPage(0)}
             />
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="previous page"
-              icon={<Icon as={MdNavigateBefore} />}
+              icon={<ChevronLeftIcon className="size-4" />}
               onClick={() => previousPage()}
             />
             <Text whiteSpace="nowrap">
@@ -460,13 +459,13 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
             <IconButton
               isDisabled={!canNextPage}
               aria-label="next page"
-              icon={<Icon as={MdNavigateNext} />}
+              icon={<ChevronRightIcon className="size-4" />}
               onClick={() => nextPage()}
             />
             <IconButton
               isDisabled={!canNextPage}
               aria-label="last page"
-              icon={<Icon as={MdLastPage} />}
+              icon={<ChevronLastIcon className="size-4" />}
               onClick={() => gotoPage(pageCount - 1)}
             />
 
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
index 2d142637a30..e6af1cf9e65 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
@@ -20,7 +20,7 @@ import {
   ChevronLastIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  CircleAlert,
+  CircleAlertIcon,
   UploadIcon,
 } from "lucide-react";
 import Papa from "papaparse";
@@ -302,7 +302,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
               }
             >
               <div className="flex flex-row items-center gap-2">
-                <CircleAlert size={16} className="text-red-500" />
+                <CircleAlertIcon className="size-4 text-red-500" />
                 <div className="cursor-default font-bold text-red-500">
                   {address}
                 </div>
diff --git a/apps/dashboard/src/pages/community/index.tsx b/apps/dashboard/src/pages/community/index.tsx
index 72331b31c0e..281a4ac6b33 100644
--- a/apps/dashboard/src/pages/community/index.tsx
+++ b/apps/dashboard/src/pages/community/index.tsx
@@ -1,14 +1,14 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Container, Flex, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Box, Container, Flex, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { CommunityCard } from "components/community/CommunityCard";
 import { HomepageFooter } from "components/footer/Footer";
 import { Aurora } from "components/homepage/Aurora";
 import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { useTrack } from "hooks/analytics/useTrack";
+import { ZapIcon } from "lucide-react";
 import { NextSeo } from "next-seo";
 import { PageId } from "page-id";
-import { BsLightningCharge } from "react-icons/bs";
 import { Heading, LinkButton, Text } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 
@@ -162,7 +162,7 @@ const Community: ThirdwebNextPage = () => {
                   }}
                   color="#000"
                   fontSize="larger"
-                  leftIcon={<Icon as={BsLightningCharge} />}
+                  leftIcon={<ZapIcon className="size-4" />}
                   isExternal
                   noIcon
                 >
@@ -346,7 +346,7 @@ const Community: ThirdwebNextPage = () => {
               }}
               color="#000"
               fontSize="larger"
-              leftIcon={<Icon as={BsLightningCharge} />}
+              leftIcon={<ZapIcon className="size-4" />}
               isExternal
               noIcon
             >