[Dashboard] Remove react-icons (3)

apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx

@@ -29,9 +29,8 @@ import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { Trash2Icon } from "lucide-react";
+import { InfoIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
-import { FiInfo } from "react-icons/fi";
 import { eth_getBlockByNumber, getRpcClient } from "thirdweb";
 import { shortenAddress as shortenAddresThrows } from "thirdweb/utils";
 import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
@@ -316,7 +315,7 @@ const ChainLastBlock = ({
         shouldWrapChildren
         placement="auto"
       >
-        <FiInfo />
+        <InfoIcon className="size-4" />
       </Tooltip>
     </Flex>
   );

apps/dashboard/src/components/engine/overview/transaction-timeline.tsx

@@ -19,8 +19,8 @@ import {
 } from "@chakra-ui/react";
 import { format } from "date-fns";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { CheckIcon } from "lucide-react";
 import { useRef } from "react";
-import { FiCheck } from "react-icons/fi";
 import { Button, FormLabel, Text } from "tw-components";
 import { AddressCopyButton } from "tw-components/AddressCopyButton";
 
@@ -133,7 +133,10 @@ export const TransactionTimeline = ({
           // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
           <Step key={index} as={Flex} w="full">
             <StepIndicator>
-              <StepStatus complete={<FiCheck />} active={<FiCheck />} />
+              <StepStatus
+                complete={<CheckIcon className="size-4" />}
+                active={<CheckIcon className="size-4" />}
+              />
             </StepIndicator>
             <Flex justify="space-between" w="full" mt={-1}>
               <div className="flex flex-col gap-2">

apps/dashboard/src/components/engine/overview/transactions-table.tsx

@@ -18,8 +18,8 @@ import { ChainIcon } from "components/icons/ChainIcon";
 import { formatDistanceToNowStrict } from "date-fns";
 import { format } from "date-fns/format";
 import { useAllChainsData } from "hooks/chains/allChains";
+import { InfoIcon, MoveLeftIcon, MoveRightIcon } from "lucide-react";
 import { useState } from "react";
-import { FiArrowLeft, FiArrowRight, FiInfo } from "react-icons/fi";
 import { toTokens } from "thirdweb";
 import {
   Button,
@@ -175,7 +175,9 @@ export const TransactionsTable: React.FC<TransactionsTableProps> = ({
                 <Badge variant={statusDetails[status].type}>
                   <Flex gap={1} align="center">
                     {statusDetails[status].name}
-                    {statusDetails[status].showTooltipIcon && <FiInfo />}
+                    {statusDetails[status].showTooltipIcon && (
+                      <InfoIcon className="size-4" />
+                    )}
                   </Flex>
                 </Badge>
               </div>
@@ -356,15 +358,15 @@ const TransactionDetailsDrawer = ({
               isDisabled={!onClickPrevious}
               onClick={onClickPrevious}
               variant="outline"
-              leftIcon={<FiArrowLeft />}
+              leftIcon={<MoveLeftIcon className="size-4" />}
             >
               Previous
             </Button>
             <Button
               isDisabled={!onClickNext}
               onClick={onClickNext}
               variant="outline"
-              rightIcon={<FiArrowRight />}
+              rightIcon={<MoveRightIcon className="size-4" />}
             >
               Next
             </Button>
@@ -485,7 +487,7 @@ const TransactionDetailsDrawer = ({
               label={`The amount of ${symbol} sent to the "To" .`}
               shouldWrapChildren
             >
-              <FiInfo />
+              <InfoIcon className="size-4" />
             </Tooltip>
           </div>
           <Text>
@@ -532,7 +534,7 @@ const TransactionDetailsDrawer = ({
                         label="The nonce value this transaction was submitted to mempool."
                         shouldWrapChildren
                       >
-                        <FiInfo />
+                        <InfoIcon className="size-4" />
                       </Tooltip>
                     </div>
                     <Text>{transaction.nonce ?? "N/A"}</Text>
@@ -547,7 +549,7 @@ const TransactionDetailsDrawer = ({
                         label="The gas units spent for this transaction."
                         shouldWrapChildren
                       >
-                        <FiInfo />
+                        <InfoIcon className="size-4" />
                       </Tooltip>
                     </div>
                     <Text>{Number(transaction.gasLimit).toLocaleString()}</Text>
@@ -562,7 +564,7 @@ const TransactionDetailsDrawer = ({
                         label="The price in wei spent for each gas unit."
                         shouldWrapChildren
                       >
-                        <FiInfo />
+                        <InfoIcon className="size-4" />
                       </Tooltip>
                     </div>
                     <Text>{Number(transaction.gasPrice).toLocaleString()}</Text>

apps/dashboard/src/components/engine/system-metrics/index.tsx

@@ -6,9 +6,8 @@ import {
   useEngineQueueMetrics,
   useEngineSystemMetrics,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, Icon } from "@chakra-ui/react";
-import { FaChartArea } from "react-icons/fa";
-import { IoIosInformationCircleOutline } from "react-icons/io";
+import { Flex } from "@chakra-ui/react";
+import { ChartAreaIcon, InfoIcon } from "lucide-react";
 import { Card, Heading, Text, TrackedLink } from "tw-components";
 import { ErrorRate } from "./components/ErrorRate";
 import { Healthcheck } from "./components/Healthcheck";
@@ -30,7 +29,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
       <Card p={8}>
         <div className="flex flex-col gap-4">
           <Flex gap={2} align="center">
-            <Icon as={IoIosInformationCircleOutline} />
+            <InfoIcon className="size-4" />
             <Heading size="title.xs">
               System metrics are unavailable for self-hosted Engine.
             </Heading>
@@ -56,7 +55,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
       <Card p={16}>
         <div className="flex flex-col gap-4">
           <Flex gap={2} align="center" pb={-2}>
-            <Icon as={FaChartArea} />
+            <ChartAreaIcon className="size-4" />
             <Heading size="title.md">System Metrics</Heading>
           </Flex>
 

apps/dashboard/src/components/homepage/sections/AnyEVM.tsx

@@ -1,6 +1,6 @@
-import { Box, Flex, Icon, Image } from "@chakra-ui/react";
+import { Box, Flex, Image } from "@chakra-ui/react";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
-import { BsLightningCharge } from "react-icons/bs";
+import { ZapIcon } from "lucide-react";
 import { Heading, LinkButton, Text } from "tw-components";
 
 export const AnyEVMSection = () => {
@@ -48,7 +48,7 @@ export const AnyEVMSection = () => {
             py={7}
             // h={{ base: "48px", md: "68px" }}
             fontSize="20px"
-            leftIcon={<Icon as={BsLightningCharge} color="black" />}
+            leftIcon={<ZapIcon className="size-5" />}
             color="black"
             flexShrink={0}
             background="rgba(255,255,255,1)"

apps/dashboard/src/components/homepage/sections/NewsletterSection.tsx

@@ -1,13 +1,6 @@
-import {
-  Box,
-  Container,
-  Flex,
-  FormControl,
-  Icon,
-  Input,
-} from "@chakra-ui/react";
+import { Box, Container, Flex, FormControl, Input } from "@chakra-ui/react";
+import { MailCheckIcon } from "lucide-react";
 import { useState } from "react";
-import { MdMarkEmailRead } from "react-icons/md";
 import { Button, Text } from "tw-components";
 
 export const NewsletterSection = () => {
@@ -41,7 +34,7 @@ export const NewsletterSection = () => {
       <Container as="section" maxW="container.page" color="gray.500">
         <div className="flex flex-col justify-between gap-8 px-12 py-12 md:flex-row md:py-16">
           <div className="flex flex-row items-center gap-5">
-            <Icon boxSize={8} color="white" as={MdMarkEmailRead} />
+            <MailCheckIcon className="size-8 text-white" />
             <div className="flex flex-col gap-2">
               <Text color="white" size="label.lg">
                 Sign up for our newsletter

apps/dashboard/src/components/landing-pages/cta-buttons.tsx

@@ -1,5 +1,5 @@
-import { Flex, Icon } from "@chakra-ui/react";
-import { BsFillLightningChargeFill } from "react-icons/bs";
+import { Flex } from "@chakra-ui/react";
+import { ZapIcon } from "lucide-react";
 import { TrackedLinkButton, type TrackedLinkProps } from "tw-components";
 
 interface LandingCTAButtonsProps {
@@ -33,7 +33,7 @@ export const LandingCTAButtons: React.FC<LandingCTAButtonsProps> = ({
     <Flex gap={{ base: 4, md: 6 }} mx={alignLeft ? "inherit" : "auto"}>
       {!noCta && (
         <TrackedLinkButton
-          leftIcon={<Icon as={BsFillLightningChargeFill} boxSize={4} />}
+          leftIcon={<ZapIcon className="size-4 fill-inherit" />}
           py={6}
           px={8}
           bgColor="white"