remove all leftover react-icons refrerences

apps/dashboard/package.json

@@ -85,7 +85,6 @@
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.9",
     "react-hook-form": "7.52.0",
-    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
     "react-responsive-carousel": "^3.2.23",

apps/dashboard/src/components/buttons/TransactionButton.tsx

@@ -3,7 +3,6 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import {
   Center,
   Flex,
-  Icon,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -12,9 +11,8 @@ import {
 } from "@chakra-ui/react";
 import { CHAIN_ID_TO_GNOSIS } from "constants/mappings";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
-import { ArrowLeftRightIcon } from "lucide-react";
+import { ArrowLeftRightIcon, InfoIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { FiInfo } from "react-icons/fi";
 import {
   useActiveAccount,
   useActiveWallet,
@@ -209,7 +207,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
       <div className="flex flex-col gap-4">
         <Heading size="label.lg">
           <div className="flex flex-row items-center gap-2">
-            <Icon color="primary.500" boxSize={6} as={FiInfo} />
+            <InfoIcon className="size-6 text-primary-foreground" />
             <span>Execute Transaction</span>
           </div>
         </Heading>
@@ -244,7 +242,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
       <div className="flex flex-col gap-4">
         <Heading size="label.lg">
           <div className="flex flex-row items-center gap-2">
-            <Icon color="primary.500" boxSize={6} as={FiInfo} />
+            <InfoIcon className="size-6 text-primary-foreground" />
             <span>Approve Transaction</span>
           </div>
         </Heading>

apps/dashboard/src/components/chain-validation/index.tsx

@@ -1,7 +1,6 @@
 import { InlineCode } from "@/components/ui/inline-code";
 import {
   FormControl,
-  Icon,
   Input,
   InputGroup,
   Table,
@@ -13,28 +12,22 @@ import {
 } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useRpcValidation } from "hooks/chains/useRpcValidation";
-import { type ChangeEvent, useMemo, useState } from "react";
-import type { IconType } from "react-icons";
-import { BiCheckCircle, BiErrorCircle } from "react-icons/bi";
-import { RiErrorWarningLine } from "react-icons/ri";
+import { AlertCircleIcon, CheckCircleIcon } from "lucide-react";
+import { type ChangeEvent, useState } from "react";
+
 import { Button, Card, FormLabel, Link, TableContainer } from "tw-components";
 
-const StatusCheck = ({
-  status,
-}: {
+const StatusCheck = (props: {
   status: "success" | "error" | "warning";
 }) => {
-  const values: [string, IconType] = useMemo(() => {
-    if (status === "error") {
-      return ["red.500", BiErrorCircle];
-    }
-    if (status === "warning") {
-      return ["yellow.500", RiErrorWarningLine];
-    }
-    return ["green.500", BiCheckCircle];
-  }, [status]);
-
-  return <Icon fontSize={16} color={values[0]} as={values[1]} />;
+  switch (props.status) {
+    case "error":
+      return <AlertCircleIcon className="size-4 text-destructive-text" />;
+    case "warning":
+      return <AlertCircleIcon className="size-4 text-warning-text" />;
+    case "success":
+      return <CheckCircleIcon className="size-4 text-success-text" />;
+  }
 };
 
 const ChainValidation: React.FC = () => {

apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx

@@ -3,17 +3,15 @@ import {
   Box,
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   ListItem,
   UnorderedList,
 } from "@chakra-ui/react";
 import type { Abi } from "abitype";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useEffect } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import { Button, Heading, Text } from "tw-components";
 import { useCustomFactoryAbi } from "../hooks";
 import { AbiSelector } from "./abi-selector";
@@ -101,7 +99,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
               </Box>
               <IconButton
                 isDisabled={fields.length === 1 || form.formState.isSubmitting}
-                icon={<Icon as={FiTrash} boxSize={5} />}
+                icon={<TrashIcon className="size-5" />}
                 aria-label="Remove row"
                 onClick={() => remove(index)}
               />

apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx

@@ -2,12 +2,11 @@ import {
   Divider,
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
 } from "@chakra-ui/react";
+import { TrashIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import { FormErrorMessage, FormLabel } from "tw-components";
 
 interface ExternalLinksInputProps {
@@ -73,7 +72,7 @@ export const ExternalLinksInput: React.FC<ExternalLinksInputProps> = ({
           </FormErrorMessage>
         </FormControl>
         <IconButton
-          icon={<Icon as={FiTrash} boxSize={5} />}
+          icon={<TrashIcon className="size-5" />}
           aria-label="Remove row"
           onClick={() => remove(index)}
           alignSelf="end"

apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx

@@ -4,7 +4,6 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   Box,
   FormControl,
-  Icon,
   Input,
   Textarea,
   useDisclosure,
@@ -22,11 +21,9 @@ import type { ProfileMetadata, ProfileMetadataInput } from "constants/schemas";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { EditIcon, GlobeIcon, ImageIcon, PencilIcon } from "lucide-react";
 import { useId } from "react";
 import { useForm } from "react-hook-form";
-import { BiImage } from "react-icons/bi";
-import { FiEdit, FiGlobe } from "react-icons/fi";
-import { HiPencilAlt } from "react-icons/hi";
 import {
   getContractPublisher,
   setPublisherProfileUri,
@@ -90,7 +87,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
         onClick={onOpen}
         size="sm"
         variant="outline"
-        leftIcon={<Icon as={FiEdit} />}
+        leftIcon={<EditIcon />}
       >
         Edit Profile
       </Button>
@@ -177,7 +174,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.avatar}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={BiImage} boxSize={4} />
+                <ImageIcon className="size-4" />
                 Avatar
               </div>
             </FormLabel>
@@ -200,7 +197,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.bio}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={HiPencilAlt} boxSize={4} />
+                <PencilIcon className="size-4" />
                 Bio
               </div>
             </FormLabel>
@@ -240,7 +237,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.website}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={FiGlobe} boxSize={4} />
+                <GlobeIcon className="size-4" />
                 Website
               </div>
             </FormLabel>

apps/dashboard/src/components/contract-components/tables/published-contracts.tsx

@@ -1,7 +1,7 @@
 import { Alert, AlertIcon, AlertTitle, Flex, Spinner } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
+import { RefreshCcwIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import { IoRefreshSharp } from "react-icons/io5";
 import { Button, Heading, LinkButton, Text } from "tw-components";
 import { PublishedContractTable } from "../contract-table-v2";
 import { usePublishedContractsQuery } from "../hooks";
@@ -100,7 +100,7 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
                 </AlertTitle>
                 <Button
                   onClick={() => publishedContractsQuery.refetch()}
-                  leftIcon={<IoRefreshSharp />}
+                  leftIcon={<RefreshCcwIcon className="size-4" />}
                   ml="auto"
                   size="sm"
                   colorScheme="red"

apps/dashboard/src/components/contract-pages/forms/properties.shared.tsx

@@ -1,15 +1,14 @@
 import {
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   InputGroup,
   InputRightElement,
   Tooltip,
 } from "@chakra-ui/react";
 import { FileInput } from "components/shared/FileInput";
-import { PlusIcon } from "lucide-react";
+import { BanIcon, PlusIcon, TrashIcon, UploadIcon, XIcon } from "lucide-react";
 import { useEffect } from "react";
 import {
   type ArrayPath,
@@ -24,7 +23,6 @@ import {
   type WatchObserver,
   useFieldArray,
 } from "react-hook-form";
-import { FiSlash, FiTrash, FiUpload, FiX } from "react-icons/fi";
 import { Button, FormErrorMessage, FormLabel } from "tw-components";
 
 type OptionalPropertiesInput = {
@@ -73,7 +71,7 @@ export const PropertiesFormControl = <
       <Flex justify="space-between" align="center" direction="row">
         <FormLabel m={0}>Attributes</FormLabel>
         <Button
-          rightIcon={<Icon as={FiSlash} />}
+          rightIcon={<BanIcon className="size-4" />}
           variant="outline"
           colorScheme="red"
           size="xs"
@@ -120,11 +118,8 @@ export const PropertiesFormControl = <
                       }
                     />
                     <InputRightElement>
-                      <Icon
-                        as={FiTrash}
-                        cursor="pointer"
-                        color="red.300"
-                        _hover={{ color: "red.200" }}
+                      <TrashIcon
+                        className="size-4 cursor-pointer text-red-300 hover:text-red-200"
                         onClick={() =>
                           setValue(
                             `attributes.${index}.value` as Path<TFieldValues>,
@@ -155,10 +150,7 @@ export const PropertiesFormControl = <
                             );
                           }}
                         >
-                          <Icon
-                            as={FiUpload}
-                            className="text-muted-foreground"
-                          />
+                          <UploadIcon className="size-4 text-muted-foreground" />
                         </FileInput>
                       </Tooltip>
                     </InputRightElement>
@@ -173,7 +165,7 @@ export const PropertiesFormControl = <
               variant="ghost"
               aria-label="remove key value pair"
               size="xs"
-              icon={<Icon as={FiX} />}
+              icon={<XIcon />}
             />
           </div>
         );

apps/dashboard/src/components/product-pages/common/GameCard.tsx

@@ -1,8 +1,8 @@
 import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { useTrack } from "hooks/analytics/useTrack";
+import { GamepadIcon } from "lucide-react";
 import NextImage, { type StaticImageData } from "next/image";
-import { IoGameControllerOutline } from "react-icons/io5";
 import {
   Button,
   Card,
@@ -72,7 +72,7 @@ export const GameCard: React.FC<GameCardProps> = ({
         />
         <div className="absolute inset-0 flex items-center justify-center">
           <Button
-            leftIcon={<IoGameControllerOutline />}
+            leftIcon={<GamepadIcon className="size-4" />}
             color="white"
             bg="rgba(0,0,0,.5)"
             _groupHover={{ bg: "rgba(0,0,0,.9)" }}

apps/dashboard/src/components/product-pages/common/GuideShowcase.tsx

@@ -1,5 +1,5 @@
-import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
-import { FiArrowRight } from "react-icons/fi";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { ArrowRightIcon } from "lucide-react";
 import { Heading, TrackedLink, type TrackedLinkProps } from "tw-components";
 import { GuideCard } from "./GuideCard";
 import { ProductSection } from "./ProductSection";
@@ -105,7 +105,7 @@ export const GuidesShowcase: React.FC<GuidesShowcaseProps> = ({
                 See all of our {solution.replace("-", " ")}{" "}
                 {caseStudies ? "case studies" : "guides"}
               </Heading>
-              <Icon as={FiArrowRight} />
+              <ArrowRightIcon className="size-4" />
             </Flex>
           </TrackedLink>
         )}

apps/dashboard/src/components/product-pages/common/Hero.tsx

@@ -1,8 +1,8 @@
-import { Container, Flex, GridItem, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Container, Flex, GridItem, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
+import { ChevronRightIcon } from "lucide-react";
 import type { StaticImageData } from "next/image";
 import type { ReactElement, ReactNode } from "react";
-import { FiChevronRight } from "react-icons/fi";
 import { Heading, LinkButton, Text, TrackedLink } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 import { ProductButton } from "./ProductButton";
@@ -74,7 +74,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
             >
               {type}
             </Text>
-            <Icon as={FiChevronRight} color="whiteAlpha.800" />
+            <ChevronRightIcon className="size-4 text-white opacity-80" />
             <Text
               cursor="default"
               fontWeight="medium"

apps/dashboard/src/components/product-pages/common/ImageCard.tsx

@@ -1,6 +1,6 @@
-import { Box, Flex, Icon } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
+import { ArrowRightIcon } from "lucide-react";
 import NextImage, { type StaticImageData } from "next/image";
-import { FiArrowRight } from "react-icons/fi";
 import { Card, Heading, TrackedLink } from "tw-components";
 import type { ComponentWithChildren } from "types/component-with-children";
 
@@ -75,15 +75,7 @@ export const ImageCard: ComponentWithChildren<ImageCardProps> = ({
           {href && (
             <Flex alignItems="center">
               {linkTitle || <span>Visit website</span>}
-              <Icon
-                as={FiArrowRight}
-                transform="rotate(-45deg)"
-                transition="transform 0.2s"
-                _groupHover={{
-                  transform: "rotate(-45deg) translateX(2px)",
-                }}
-                ml={2}
-              />
+              <ArrowRightIcon className="-rotate-45 ml-2 size-4 transition-transform group-hover:translate-x-1 group-hover:rotate-45" />
             </Flex>
           )}
         </Flex>

apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx

@@ -1,8 +1,8 @@
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
+import { ArrowRightIcon } from "lucide-react";
 import type { StaticImageData } from "next/image";
 import type { ReactNode } from "react";
-import { FiArrowRight } from "react-icons/fi";
 import {
   Heading,
   Text,
@@ -51,12 +51,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
         role="group"
       >
         <span>Learn more</span>
-        <Icon
-          as={FiArrowRight}
-          transform="rotate(-45deg)"
-          transition="transform 0.2s"
-          _groupHover={{ transform: "rotate(-45deg) translateX(2px)" }}
-        />
+        <ArrowRightIcon className="-rotate-45 ml-2 size-4 transition-transform group-hover:translate-x-1 group-hover:rotate-45" />
       </TrackedLink>
     </Flex>
   );