[Dashboard] Remove react-icons (2)

apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -12,10 +12,9 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { MdOutlineAccountBalanceWallet } from "react-icons/md";
 import {
   getContract,
   prepareContractCall,
@@ -201,7 +200,7 @@ ${Object.keys(populatedTransaction)
                   size="icon"
                   onClick={() => form.setValue("from", activeAccount.address)}
                 >
-                  <MdOutlineAccountBalanceWallet />
+                  <WalletIcon className="size-4" />
                 </Button>
               </ToolTipLabel>
             )}

apps/dashboard/src/components/color-mode/color-mode-toggle.tsx

@@ -2,8 +2,8 @@
 
 import { Button } from "@/components/ui/button";
 import { SkeletonContainer } from "@/components/ui/skeleton";
+import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
-import { FiMoon, FiSun } from "react-icons/fi";
 import { useIsClientMounted } from "../ClientOnly/ClientOnly";
 
 export const ColorModeToggle: React.FC = () => {
@@ -29,9 +29,9 @@ export const ColorModeToggle: React.FC = () => {
             onClick={() => setTheme(theme === "light" ? "dark" : "light")}
           >
             {v === "dark" ? (
-              <FiMoon className="size-5" />
+              <MoonIcon className="size-5" />
             ) : (
-              <FiSun className="size-5" />
+              <SunIcon className="size-5" />
             )}
           </Button>
         );

apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx

@@ -4,17 +4,17 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Box, Divider, Flex, Icon, IconButton } from "@chakra-ui/react";
+import { Box, Divider, Flex, IconButton } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
   DASHBOARD_FORWARDER_ADDRESS,
 } from "constants/misc";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { ChevronFirstIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { IoChevronBack } from "react-icons/io5";
 import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import {
   getContractPublisher,
@@ -312,7 +312,7 @@ export function ContractPublishForm(props: {
                       : setFieldsetToShow("landing")
                 }
                 aria-label="Back"
-                icon={<Icon as={IoChevronBack} boxSize={6} />}
+                icon={<ChevronFirstIcon className="size-6" />}
               >
                 Back
               </IconButton>

apps/dashboard/src/contract-ui/tabs/permissions/components/permissions-editor.tsx

@@ -15,10 +15,11 @@ import {
 } from "@chakra-ui/react";
 import { DelayedDisplay } from "components/delayed-display/delayed-display";
 import { useClipboard } from "hooks/useClipboard";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { BiPaste } from "react-icons/bi";
-import { FiCopy, FiInfo, FiPlus, FiTrash } from "react-icons/fi";
+import { FiCopy, FiInfo, FiTrash } from "react-icons/fi";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS, isAddress } from "thirdweb";
 import { Button, FormErrorMessage, Text } from "tw-components";
@@ -119,7 +120,7 @@ export const PermissionEditor: React.FC<PermissionEditorProps> = ({
             />
             <InputRightAddon p={0} border="none">
               <Button
-                leftIcon={<Icon as={FiPlus} boxSize={4} />}
+                leftIcon={<PlusIcon className="size-4" />}
                 size="sm"
                 borderLeftRadius="none"
                 borderRightRadius="md"

apps/dashboard/src/contract-ui/tabs/settings/components/metadata.tsx

@@ -4,7 +4,6 @@ import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import {
   Flex,
   FormControl,
-  Icon,
   IconButton,
   Input,
   Textarea,
@@ -17,10 +16,9 @@ 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 { PlusIcon, Trash2Icon } from "lucide-react";
 import { useMemo } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import { FiTrash } from "react-icons/fi";
 import type { ThirdwebContract } from "thirdweb";
 import {
   getContractMetadata,
@@ -303,7 +301,7 @@ export const SettingsMetadata = ({
                       isDisabled={
                         metadata.isPending || sendTransaction.isPending
                       }
-                      icon={<Icon as={FiTrash} boxSize={5} />}
+                      icon={<Trash2Icon className="size-5" />}
                       aria-label="Remove row"
                       onClick={() => remove(index)}
                     />

apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx

@@ -2,7 +2,6 @@ import { WalletAddress } from "@/components/blocks/wallet-address";
 import {
   ButtonGroup,
   Flex,
-  Icon,
   IconButton,
   Select,
   Skeleton,
@@ -19,20 +18,20 @@ import {
 import type { UseQueryResult } from "@tanstack/react-query";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
 import { ListingDrawer } from "contract-ui/tabs/shared-components/listing-drawer";
+import {
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoveRightIcon,
+} from "lucide-react";
 import {
   type Dispatch,
   type SetStateAction,
   useEffect,
   useMemo,
   useState,
 } from "react";
-import { FiArrowRight } from "react-icons/fi";
-import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
 import { type Cell, type Column, usePagination, useTable } from "react-table";
 import type { ThirdwebContract } from "thirdweb";
 import type {
@@ -268,7 +267,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                     </Td>
                   ))}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
-                    <Icon as={FiArrowRight} />
+                    <MoveRightIcon className="size-3" />
                   </Td>
                 </Tr>
               );
@@ -281,13 +280,13 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
             aria-label="first page"
-            icon={<Icon as={MdFirstPage} />}
+            icon={<ChevronFirstIcon className="size-4" />}
             onClick={() => gotoPage(0)}
           />
           <IconButton
             isDisabled={!canPreviousPage || totalCountQuery.isPending}
             aria-label="previous page"
-            icon={<Icon as={MdNavigateBefore} />}
+            icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
           <Text whiteSpace="nowrap">
@@ -303,13 +302,13 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           <IconButton
             isDisabled={!canNextPage || totalCountQuery.isPending}
             aria-label="next page"
-            icon={<Icon as={MdNavigateNext} />}
+            icon={<ChevronRightIcon className="size-4" />}
             onClick={() => nextPage()}
           />
           <IconButton
             isDisabled={!canNextPage || totalCountQuery.isPending}
             aria-label="last page"
-            icon={<Icon as={MdLastPage} />}
+            icon={<ChevronLastIcon className="size-4" />}
             onClick={() => gotoPage(pageCount - 1)}
           />
 

apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx

@@ -16,10 +16,10 @@ import {
 } from "@chakra-ui/react";
 import { useQueries } from "@tanstack/react-query";
 import {
-  ChevronFirst,
-  ChevronLast,
-  ChevronLeft,
-  ChevronRight,
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
   CircleAlert,
   UploadIcon,
 } from "lucide-react";
@@ -395,36 +395,36 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
         </Tbody>
       </Table>
       {/* Only need to show the Pagination components if we have more than 25 records */}
-      {data.length > 25 && (
+      {data.length > 0 && (
         <Portal containerRef={portalRef}>
           <div className="flex w-full items-center justify-center">
-            <div className="flex flex-row">
+            <div className="flex flex-row gap-1">
               <IconButton
                 isDisabled={!canPreviousPage}
                 aria-label="first page"
-                icon={<ChevronFirst size={16} />}
+                icon={<ChevronFirstIcon className="size-4" />}
                 onClick={() => gotoPage(0)}
               />
               <IconButton
                 isDisabled={!canPreviousPage}
                 aria-label="previous page"
-                icon={<ChevronLeft size={16} />}
+                icon={<ChevronLeftIcon className="size-4" />}
                 onClick={() => previousPage()}
               />
-              <Text whiteSpace="nowrap">
+              <p className="my-auto whitespace-nowrap">
                 Page <strong>{pageIndex + 1}</strong> of{" "}
                 <strong>{pageOptions.length}</strong>
-              </Text>
+              </p>
               <IconButton
                 isDisabled={!canNextPage}
                 aria-label="next page"
-                icon={<ChevronRight size={16} />}
+                icon={<ChevronRightIcon className="size-4" />}
                 onClick={() => nextPage()}
               />
               <IconButton
                 isDisabled={!canNextPage}
                 aria-label="last page"
-                icon={<ChevronLast size={16} />}
+                icon={<ChevronLastIcon className="size-4" />}
                 onClick={() => gotoPage(pageCount - 1)}
               />
               <Select

apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx

@@ -7,7 +7,6 @@ import {
   Container,
   Flex,
   FormControl,
-  Icon,
   Input,
   InputGroup,
   InputRightElement,
@@ -17,11 +16,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
-import { IoChevronBack } from "react-icons/io5";
 import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721";
 import type { NFTInput } from "thirdweb/utils";
 import {
@@ -269,14 +267,14 @@ export const BatchLazyMint: ComponentWithChildren<BatchLazyMintProps> = (
                 mb={2}
               >
                 <div className="flex flex-row">
-                  <Icon
-                    boxSize={5}
-                    as={IoChevronBack}
-                    color="gray.600"
+                  <Button
+                    className="text-muted-foreground"
+                    variant="ghost"
                     onClick={() => setStep(0)}
-                    cursor="pointer"
-                  />
-                  <Heading size="title.md">
+                  >
+                    <ChevronLeftIcon className="size-5 cursor-pointer" />
+                  </Button>
+                  <Heading size="title.md" className="my-auto">
                     When will you reveal your NFTs?
                   </Heading>
                 </div>

apps/dashboard/src/core-ui/batch-upload/batch-table.tsx

@@ -3,7 +3,6 @@ import {
   Box,
   type BoxProps,
   Flex,
-  Icon,
   IconButton,
   Image,
   type ImageProps,
@@ -19,13 +18,13 @@ import {
 } from "@chakra-ui/react";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
 import { replaceIpfsUrl } from "lib/sdk";
-import { useMemo } from "react";
 import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { useMemo } from "react";
 import { type Column, usePagination, useTable } from "react-table";
 import type { NFTInput } from "thirdweb/utils";
 import { CodeBlock, Text } from "tw-components";
@@ -219,13 +218,13 @@ export const BatchTable: React.FC<BatchTableProps> = ({
             <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">
@@ -235,13 +234,13 @@ export const BatchTable: React.FC<BatchTableProps> = ({
             <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)}
             />
 

apps/dashboard/src/pages/contact-us.tsx

@@ -4,7 +4,6 @@ import {
   Flex,
   type FlexProps,
   FormControl,
-  Icon,
   Image,
   Input,
   List,
@@ -16,10 +15,10 @@ import { PartnerLogo } from "components/partners/partner-logo";
 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 { PageId } from "page-id";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { BsFillLightningChargeFill } from "react-icons/bs";
 import { Button, Card, Heading, Text } from "tw-components";
 import type { ThirdwebNextPage } from "utils/types";
 import type { ContactFormPayload } from "../app/api/contact-us/types";
@@ -336,7 +335,7 @@ const ContactUs: ThirdwebNextPage = () => {
                   _hover={{ bg: "black", opacity: 0.8 }}
                   px={8}
                   py={6}
-                  leftIcon={<Icon as={BsFillLightningChargeFill} />}
+                  leftIcon={<ZapIcon className="size-5" />}
                   isDisabled={formStatus === "submitting"}
                 >
                   <Text color="white" size="label.lg">