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

kien-ngo · kien-ngo · commit 79c50cb311ff · 2024-10-01T23:46:56.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR primarily focuses on replacing various icon components with `PlusIcon` and `UploadIcon` from the `lucide-react` library, enhancing the UI consistency across the application.

### Detailed summary
- Replaced `Upload` component with `UploadIcon` in `airdrop-upload-erc20.tsx` and `upload-step.tsx`.
- Updated `FiPlus` icons to `PlusIcon` in multiple components, including `external-links-fieldset.tsx`, `NFTMintButton.tsx`, and more.
- Removed unused `Icon` imports from several files.
- Adjusted icon classes for consistent styling.

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

&lt;!-- end pr-codex --&gt;
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -9,9 +9,10 @@ import {
   UnorderedList,
 } from "@chakra-ui/react";
 import type { Abi } from "abitype";
+import { PlusIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useEffect } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { FiPlus, FiTrash } from "react-icons/fi";
+import { FiTrash } from "react-icons/fi";
 import { Button, Heading, Text } from "tw-components";
 import { useCustomFactoryAbi } from "../hooks";
 import { NetworkDropdown } from "./NetworkDropdown";
@@ -112,7 +113,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
             size="sm"
             colorScheme="primary"
             borderRadius="md"
-            leftIcon={<Icon as={FiPlus} />}
+            leftIcon={<PlusIcon className="size-5" />}
             onClick={() => append({ key: "", value: "" })}
           >
             Add Network
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
@@ -1,7 +1,7 @@
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
+import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
-import { FiPlus } from "react-icons/fi";
 import { Button, Heading, Text } from "tw-components";
 import { ExternalLinksInput } from "./external-links-input";
 
@@ -43,7 +43,7 @@ export const ExternalLinksFieldset = () => {
             size="sm"
             colorScheme="primary"
             borderRadius="md"
-            leftIcon={<Icon as={FiPlus} />}
+            leftIcon={<PlusIcon className="size-5" />}
             onClick={() =>
               append({
                 name: "",
diff --git a/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx b/apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx
@@ -9,6 +9,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { FileInput } from "components/shared/FileInput";
+import { PlusIcon } from "lucide-react";
 import { useEffect } from "react";
 import {
   type ArrayPath,
@@ -23,7 +24,7 @@ import {
   type WatchObserver,
   useFieldArray,
 } from "react-hook-form";
-import { FiPlus, FiSlash, FiTrash, FiUpload, FiX } from "react-icons/fi";
+import { FiSlash, FiTrash, FiUpload, FiX } from "react-icons/fi";
 import { Button, FormErrorMessage, FormLabel } from "tw-components";
 
 type OptionalPropertiesInput = {
@@ -179,7 +180,7 @@ export const PropertiesFormControl = <
       })}
       <div className="flex flex-row gap-2">
         <Button
-          leftIcon={<Icon as={FiPlus} />}
+          leftIcon={<PlusIcon className="size-5" />}
           colorScheme="purple"
           size="sm"
           onClick={() =>
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx
@@ -10,7 +10,6 @@ import {
   AlertTitle,
   Box,
   Flex,
-  Icon,
   Menu,
   MenuButton,
   MenuList,
@@ -20,15 +19,14 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { SnapshotUpload } from "contract-ui/tabs/claim-conditions/components/snapshot-upload";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { CircleHelpIcon } from "lucide-react";
+import { CircleHelpIcon, PlusIcon } from "lucide-react";
 import { Fragment, createContext, useContext, useMemo, useState } from "react";
 import {
   type UseFieldArrayReturn,
   type UseFormReturn,
   useFieldArray,
   useForm,
 } from "react-hook-form";
-import { FiPlus } from "react-icons/fi";
 import {
   NATIVE_TOKEN_ADDRESS,
   type ThirdwebContract,
@@ -567,7 +565,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     colorScheme="primary"
                     variant={phases?.length > 0 ? "outline" : "solid"}
                     borderRadius="md"
-                    leftIcon={<Icon as={FiPlus} />}
+                    leftIcon={<PlusIcon className="size-5" />}
                     isDisabled={
                       sendTx.isPending || (!isMultiPhase && phases?.length > 0)
                     }
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/lazy-mint-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
-import { FiPlus } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import { PlusIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { LazyMintNftForm } from "./lazy-mint-form";
@@ -30,7 +30,7 @@ export const NFTLazyMintButton: React.FC<NFTLazyMintButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={FiPlus} />}
+        leftIcon={<PlusIcon className="size-5" />}
         {...restButtonProps}
         onClick={onOpen}
       >
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/mint-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
-import { FiPlus } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import { PlusIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { NFTMintForm } from "./mint-form";
@@ -31,7 +31,7 @@ export const NFTMintButton: React.FC<NFTMintButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={FiPlus} />}
+        leftIcon={<PlusIcon className="size-5" />}
         {...restButtonProps}
         onClick={onOpen}
       >
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/shared-metadata-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { MinterOnly } from "@3rdweb-sdk/react/components/roles/minter-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
-import { FiPlus } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import { PlusIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { SharedMetadataForm } from "./shared-metadata-form";
@@ -28,7 +28,7 @@ export const NFTSharedMetadataButton: React.FC<
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={FiPlus} />}
+        leftIcon={<PlusIcon className="size-5" />}
         {...restButtonProps}
         onClick={onOpen}
       >
diff --git a/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx b/apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { Icon, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
-import { FiPlus } from "react-icons/fi";
+import { PlusIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { Button, Drawer } from "tw-components";
@@ -60,7 +60,7 @@ export const ProposalButton: React.FC<VoteButtonProps> = ({ contract }) => {
       <Button
         colorScheme="primary"
         onClick={onOpen}
-        leftIcon={<Icon as={FiPlus} />}
+        leftIcon={<PlusIcon className="size-5" />}
       >
         Create Proposal
       </Button>
diff --git a/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx b/apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx
@@ -17,9 +17,10 @@ import { CommonContractSchema } from "constants/schemas";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { PlusIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import { FiPlus, FiTrash } from "react-icons/fi";
+import { FiTrash } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import {
   getContractMetadata,
@@ -317,7 +318,7 @@ export const SettingsMetadata = ({
                 size="sm"
                 colorScheme="primary"
                 borderRadius="md"
-                leftIcon={<Icon as={FiPlus} />}
+                leftIcon={<PlusIcon className="size-5" />}
                 onClick={() => append({ key: "", value: "" })}
               >
                 Add URL
diff --git a/apps/dashboard/src/contract-ui/tabs/shared-components/list-button.tsx b/apps/dashboard/src/contract-ui/tabs/shared-components/list-button.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
-import { Icon, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
-import { FiPlus } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import { Button, Drawer } from "tw-components";
@@ -71,7 +71,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={FiPlus} />}
+        leftIcon={<PlusIcon className="size-5" />}
         {...restButtonProps}
         onClick={onOpen}
         isDisabled={!address}
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
@@ -21,7 +21,7 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleAlert,
-  Upload,
+  UploadIcon,
 } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -231,7 +231,7 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
             >
               <input {...getInputProps()} />
               <div className="flex flex-col p-6">
-                <Upload
+                <UploadIcon
                   size={16}
                   className={cn("mx-auto mb-2 text-gray-500", {
                     "text-red-500": noCsv,
diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -1,7 +1,7 @@
 import { InlineCode } from "@/components/ui/inline-code";
 import { cn } from "@/lib/utils";
-import { Container, Flex, Icon, Link, UnorderedList } from "@chakra-ui/react";
-import { BsFillCloudUploadFill } from "react-icons/bs";
+import { Container, Flex, Link, UnorderedList } from "@chakra-ui/react";
+import { UploadIcon } from "lucide-react";
 import { Heading, Text } from "tw-components";
 
 interface UploadStepProps {
@@ -33,12 +33,11 @@ export const UploadStep: React.FC<UploadStepProps> = ({
             >
               <input {...getInputProps()} />
               <div className="m-auto flex flex-col p-6">
-                <Icon
-                  as={BsFillCloudUploadFill}
-                  boxSize={8}
-                  mb={2}
-                  color={hasFailed ? "red.500" : "gray.600"}
-                  mx="auto"
+                <UploadIcon
+                  className={cn(
+                    "mx-auto mb-2 size-8",
+                    hasFailed ? "text-red-500" : "text-gray-600",
+                  )}
                 />
                 {isDragActive ? (
                   <Heading
diff --git a/apps/dashboard/src/pages/learn/index.tsx b/apps/dashboard/src/pages/learn/index.tsx
@@ -1,5 +1,5 @@
 import { useForceDarkTheme } from "@/components/theme-provider";
-import { Box, Flex, Icon, LightMode, SimpleGrid } from "@chakra-ui/react";
+import { Box, Flex, LightMode, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageFooter } from "components/footer/Footer";
 import { NewsletterSection } from "components/homepage/sections/NewsletterSection";
@@ -9,9 +9,9 @@ import { ProductSection } from "components/product-pages/common/ProductSection";
 import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 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 } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 import WhiteLogo from "../../../public/assets/landingpage/white-logo.png";
@@ -210,13 +210,7 @@ const Learn: ThirdwebNextPage = () => {
               <LinkButton
                 role="group"
                 leftIcon={
-                  <Icon
-                    as={BsLightningCharge}
-                    color="#1D64EF"
-                    transitionDuration="slow"
-                    transitionTimingFunction="easeOut"
-                    _groupHover={{ color: "#E0507A" }}
-                  />
+                  <ZapIcon className="size-5 text-[#1D64EF] transition-colors duration-300 ease-out group-hover:text-[#E0507A]" />
                 }
                 color="black"
                 px={20}
diff --git a/apps/dashboard/src/pages/open-source.tsx b/apps/dashboard/src/pages/open-source.tsx
@@ -6,19 +6,18 @@ import {
   AccordionItem,
   AccordionPanel,
   Flex,
-  Icon,
   LinkBox,
   SimpleGrid,
 } from "@chakra-ui/react";
 import { Aurora } from "components/homepage/Aurora";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { ProductPage } from "components/product-pages/common/ProductPage";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import type { GetStaticProps } from "next";
 import { PageId } from "page-id";
 import type { ReactNode } from "react";
-import { BsGithub } from "react-icons/bs";
 import { Heading, LinkButton, Text, TrackedLink } from "tw-components";
 import { MaskedAvatar } from "tw-components/masked-avatar";
 import type { ThirdwebNextPage } from "utils/types";
@@ -297,7 +296,7 @@ const OSS: ThirdwebNextPage = ({ contributors }: PageProps) => {
                   px={4}
                   py={7}
                   fontSize="20px"
-                  leftIcon={<Icon as={BsGithub} color="black" />}
+                  leftIcon={<GithubIcon className="size-5 text-black" />}
                   color="black"
                   flexShrink={0}
                   background="rgba(255,255,255,1)"
