[Dashboard] Remove non-branding icons (#4810)

kien-ngo · kien-ngo · commit ebd5908d4ad9 · 2024-09-27T01:11:42.000Z
&lt;!-- start pr-codex --&gt;

## PR-Codex overview
This PR focuses on replacing various `react-icons` with `lucide-react` icons across multiple components, along with some minor adjustments to properties and imports. It aims to standardize icon usage within the codebase.

### Detailed summary
- Removed `IconType` from multiple interfaces in `types.ts` and `AnimatedCLICommand.tsx`.
- Replaced `react-icons` with `lucide-react` icons in `HackathonFooter`, `NFTClaimButton`, and other components.
- Updated icon rendering logic in multiple components for consistency.
- Adjusted imports and usage of icons in `FileInput`, `BatchLazyMint`, and `MismatchButton`.

&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/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -25,7 +25,6 @@ import {
   useBreakpointValue,
   useDisclosure,
 } from "@chakra-ui/react";
-import { AiOutlineWarning } from "@react-icons/all-files/ai/AiOutlineWarning";
 import { useQuery } from "@tanstack/react-query";
 import { FaucetButton } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton";
 import { GiftIcon } from "app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/GiftIcon";
@@ -36,7 +35,7 @@ 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 } from "lucide-react";
+import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
@@ -448,7 +447,7 @@ const MismatchNotice: React.FC<{
     <div className="flex flex-col gap-4">
       <Heading size="label.lg">
         <div className="flex flex-row items-center gap-2">
-          <Icon boxSize={6} as={AiOutlineWarning} />
+          <TriangleAlertIcon className="size-6" />
           <span>Network Mismatch</span>
         </div>
       </Heading>
diff --git a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -60,7 +60,7 @@ export const HackathonEarnFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={ImMagicWand} />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/HackathonFooter.tsx b/apps/dashboard/src/components/hackathon/HackathonFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
-import { ImMagicWand } from "@react-icons/all-files/im/ImMagicWand";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -56,7 +56,7 @@ export const HackathonFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Icon as={ImMagicWand} />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx b/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx
@@ -1,6 +1,6 @@
-import { Flex, Icon, LinkBox, LinkOverlay } from "@chakra-ui/react";
-import { BiRightArrowAlt } from "@react-icons/all-files/bi/BiRightArrowAlt";
+import { Flex, LinkBox, LinkOverlay } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
+import { MoveRightIcon } from "lucide-react";
 import { Badge, Heading, LinkButton, Text } from "tw-components";
 
 interface ScheduleItem {
@@ -108,14 +108,7 @@ export const ScheduleSection: React.FC<ScheduleSectionProps> = ({
                 </Flex>
               </LinkOverlay>
             </Flex>
-            <Icon
-              as={BiRightArrowAlt}
-              boxSize={6}
-              color="gray.300"
-              _groupHover={{ color: "#e984f3" }}
-              display={{ base: "none", md: "block" }}
-              marginLeft="auto"
-            />
+            <MoveRightIcon className="ml-auto hidden size-4 text-gray-300 md:block" />
           </Flex>
         ))}
       </Flex>
diff --git a/apps/dashboard/src/components/homepage/AnimatedCLICommand/AnimatedCLICommand.tsx b/apps/dashboard/src/components/homepage/AnimatedCLICommand/AnimatedCLICommand.tsx
diff --git a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
@@ -8,12 +8,11 @@ import {
   useColorModeValue,
   useTheme,
 } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useEffect, useRef, useState } from "react";
 import { BsLightning } from "react-icons/bs";
-import { FiCopy } from "react-icons/fi";
 import { useInView } from "react-intersection-observer";
 import { Text } from "tw-components";
 
@@ -162,10 +161,11 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
               colorScheme="gray"
               size="sm"
               icon={
-                <Icon
-                  as={hasCopied ? IoMdCheckmark : FiCopy}
-                  fill={hasCopied ? "green.500" : undefined}
-                />
+                hasCopied ? (
+                  <CheckIcon className="size-4 text-green-500" />
+                ) : (
+                  <CopyIcon className="size-4" />
+                )
               }
             />
           )}
diff --git a/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   type FlexProps,
-  Icon,
   IconButton,
   ListItem,
   UnorderedList,
@@ -106,17 +105,15 @@ const MobileNavSection: React.FC<MobileNavSectionProps> = ({
               size="label.md"
               onClick={onItemClick}
             >
-              {link.icon ? (
+              {link.icon && (
                 <ChakraNextImage
                   alt=""
                   boxSize={5}
                   src={link.icon}
                   sizes="40px"
                   w={5}
                 />
-              ) : link.iconType ? (
-                <Icon as={link.iconType} h={4} w={5} />
-              ) : null}
+              )}
               {link.name}
             </Heading>
           </ListItem>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, Stack } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -9,7 +9,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
   label,
   link,
   icon,
-  iconType,
   comingSoon,
 }) => {
   return (
@@ -26,14 +25,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
           {icon && (
             <ChakraNextImage boxSize={7} mb="-4px" src={icon} alt="icon" />
           )}
-          {iconType && (
-            <Icon
-              as={iconType}
-              color={comingSoon ? "whiteAlpha.400" : "white"}
-              boxSize={6}
-              mr={2}
-            />
-          )}
           <div className="flex flex-col">
             <Text
               fontWeight="bold"
diff --git a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
@@ -1,5 +1,4 @@
 import { Box, Stack } from "@chakra-ui/react";
-import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 import { Text } from "tw-components";
 
@@ -8,7 +7,6 @@ interface ProductSectionItemProps {
   description: string;
   href?: string;
   icon?: StaticImageData;
-  iconType?: IconType;
   comingSoon?: boolean;
   selected: boolean;
 }
diff --git a/apps/dashboard/src/components/product-pages/common/nav/types.ts b/apps/dashboard/src/components/product-pages/common/nav/types.ts
@@ -1,4 +1,3 @@
-import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 
 export interface SectionProps {
@@ -8,7 +7,6 @@ export interface SectionProps {
   icon?: StaticImageData;
   link?: string;
   section?: "contracts-v2" | "connect-v2" | "engine-v2";
-  iconType?: IconType;
   comingSoon?: boolean;
 }
 
@@ -20,7 +18,6 @@ export interface SectionItemProps {
   link: string;
   dashboardLink?: string;
   icon?: StaticImageData;
-  iconType?: IconType;
   comingSoon?: boolean;
   inLandingPage?: boolean;
   section:
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { AiFillEye } from "@react-icons/all-files/ai/AiFillEye";
-import { AiOutlineFileAdd } from "@react-icons/all-files/ai/AiOutlineFileAdd";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { EyeIcon, FilePlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback } from "react";
 import {
@@ -182,14 +181,14 @@ export const FileInput: React.FC<IFileInputProps> = ({
               disabled={isDisabled}
               className="gap-2"
             >
-              <AiOutlineFileAdd className="size-4" />
-              {selectOrUpload} {helperTextOrFile}
+              <FilePlusIcon className="size-4" /> {selectOrUpload}{" "}
+              {helperTextOrFile}
             </Button>
           )}
           {noDisplay && (
             <Link href={fileUrl} target="_blank" className="no-underline">
               <Button variant="outline" className="gap-2">
-                <AiFillEye className="size-4" />
+                <EyeIcon className="size-4" />
                 View File
               </Button>
             </Link>
diff --git a/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx b/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx
@@ -9,13 +9,12 @@ import {
   Stack,
   useBreakpointValue,
 } from "@chakra-ui/react";
-import { IoMdCheckmark } from "@react-icons/all-files/io/IoMdCheckmark";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
-import { FiCopy } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -567,7 +566,13 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                 chainId,
               });
             }}
-            leftIcon={hasCopied ? <IoMdCheckmark /> : <FiCopy />}
+            leftIcon={
+              hasCopied ? (
+                <CheckIcon className="size-4" />
+              ) : (
+                <CopyIcon className="size-4" />
+              )
+            }
           >
             {hasCopied ? "Copied!" : "Copy to clipboard"}
           </Button>
diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
@@ -23,9 +23,9 @@ import {
   Switch,
   Tooltip,
 } from "@chakra-ui/react";
-import { AiOutlineQuestionCircle } from "@react-icons/all-files/ai/AiOutlineQuestionCircle";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
+import { CircleHelpIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { Fragment, useMemo, useState } from "react";
@@ -398,7 +398,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
             }
           >
             <div className="flex items-center justify-center">
-              <Icon as={AiOutlineQuestionCircle} color="gray.600" />
+              <CircleHelpIcon className="size-4 text-gray-600" />
             </div>
           </Tooltip>
 
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx
@@ -1,5 +1,5 @@
-import { Icon, useDisclosure } from "@chakra-ui/react";
-import { GiDiamondHard } from "@react-icons/all-files/gi/GiDiamondHard";
+import { useDisclosure } from "@chakra-ui/react";
+import { GemIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { NFTClaimForm } from "./claim-form";
@@ -28,7 +28,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={GiDiamondHard} />}
+        leftIcon={<GemIcon className="size-4" />}
         onClick={onOpen}
       >
         Claim
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -13,11 +13,10 @@ import {
   Textarea,
 } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AiFillEye } from "@react-icons/all-files/ai/AiFillEye";
-import { AiFillEyeInvisible } from "@react-icons/all-files/ai/AiFillEyeInvisible";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
@@ -396,10 +395,17 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                         type={show ? "text" : "password"}
                       />
                       <InputRightElement cursor="pointer">
-                        <Icon
-                          as={show ? AiFillEye : AiFillEyeInvisible}
-                          onClick={() => setShow(!show)}
-                        />
+                        {show ? (
+                          <EyeIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        ) : (
+                          <EyeOffIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        )}
                       </InputRightElement>
                     </InputGroup>
 
diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -1,12 +1,5 @@
-import {
-  Flex,
-  Icon,
-  Radio,
-  Stack,
-  type StackProps,
-  Tooltip,
-} from "@chakra-ui/react";
-import { AiOutlineInfoCircle } from "@react-icons/all-files/ai/AiOutlineInfoCircle";
+import { Flex, Radio, Stack, type StackProps, Tooltip } from "@chakra-ui/react";
+import { InfoIcon } from "lucide-react";
 import type { MouseEventHandler } from "react";
 import { Card, Heading, Text } from "tw-components";
 
@@ -97,7 +90,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 }
               >
                 <Flex alignItems="center">
-                  <Icon as={AiOutlineInfoCircle} boxSize={5} />
+                  <InfoIcon className="size-4" />
                 </Flex>
               </Tooltip>
             </div>
diff --git a/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx b/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx
diff --git a/apps/dashboard/src/pages/hackathon/earn.tsx b/apps/dashboard/src/pages/hackathon/earn.tsx
diff --git a/apps/dashboard/src/pages/template/[id].tsx b/apps/dashboard/src/pages/template/[id].tsx
diff --git a/apps/dashboard/src/tw-components/code-block.tsx b/apps/dashboard/src/tw-components/code-block.tsx
