[Dashboard] Remove react-icons (5) (#4904)

## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview This PR focuses on replacing icon imports from `react-icons` with `lucide-react` icons across various components in the dashboard application, enhancing the visual consistency and potentially improving performance. ### Detailed summary - Replaced `FiEye` with `EyeIcon` in `reveal-button.tsx`. - Replaced `FiCopy` with `CopyIcon` in `LatestEvents.tsx`. - Replaced `BsLightningCharge` with `ZapIcon` in `GeneralCta.tsx`. - Replaced `FiCheck` with `CheckIcon` in `address-input.tsx`. - Replaced `FaXTwitter` with `XIcon` and `SiOpensea` with `OpenseaIcon` in `OpCreditsGrantedModal.tsx`. - Replaced `FiX` with `XIcon` and caret icons with `ChevronDownIcon`, `ChevronUpIcon` in `phase.tsx`. - Replaced `FiPlay` with `PlayIcon` and `FaCircleInfo` with `InfoIcon` in `interactive-abi-function.tsx`. - Replaced `FiInfo` with `InfoIcon` in `list-form.tsx`. - Replaced navigation icons in `accounts-table.tsx` with `Chevron` icons from `lucide-react`. - Added `OpenseaIcon` component in `OpenseaIcon.tsx`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
thirdweb-dev · Oct 3, 2024 · a7e285a · a7e285a
1 parent 615dd1e
commit a7e285a
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 65 deletions.
diff --git a/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx b/apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
@@ -7,7 +7,6 @@ import {
   Divider,
   Flex,
   FormControl,
-  Icon,
   Input,
 } from "@chakra-ui/react";
 import { useMutation } from "@tanstack/react-query";
@@ -16,10 +15,9 @@ import { TransactionButton } from "components/buttons/TransactionButton";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { camelToTitle } from "contract-ui/components/solidity-inputs/helpers";
 import { replaceIpfsUrl } from "lib/sdk";
+import { InfoIcon, PlayIcon } from "lucide-react";
 import { useEffect, useId, useMemo, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
-import { FaCircleInfo } from "react-icons/fa6";
-import { FiPlay } from "react-icons/fi";
 import { toast } from "sonner";
 import {
   type ThirdwebContract,
@@ -446,7 +444,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = ({
           {isView ? (
             <Button
               isDisabled={!abiFunction}
-              rightIcon={<Icon as={FiPlay} />}
+              rightIcon={<PlayIcon className="size-4" />}
               colorScheme="primary"
               isLoading={readLoading}
               onClick={handleContractRead}
@@ -465,7 +463,7 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = ({
               >
                 <ToolTipLabel label="Simulate the transaction to see its potential outcome without actually sending it to the network. This action doesn't cost gas.">
                   <span className="mr-3">
-                    <FaCircleInfo size={20} />
+                    <InfoIcon className="size-5" />
                   </span>
                 </ToolTipLabel>
                 Simulate

diff --git a/apps/dashboard/src/components/icons/brand-icons/OpenseaIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/OpenseaIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const OpenseaIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>OpenSea</title>
+      <path d="M12 0C5.374 0 0 5.374 0 12s5.374 12 12 12 12-5.374 12-12S18.629 0 12 0ZM5.92 12.403l.051-.081 3.123-4.884a.107.107 0 0 1 .187.014c.52 1.169.972 2.623.76 3.528-.088.372-.335.876-.614 1.342a2.405 2.405 0 0 1-.117.199.106.106 0 0 1-.09.045H6.013a.106.106 0 0 1-.091-.163zm13.914 1.68a.109.109 0 0 1-.065.101c-.243.103-1.07.485-1.414.962-.878 1.222-1.548 2.97-3.048 2.97H9.053a4.019 4.019 0 0 1-4.013-4.028v-.072c0-.058.048-.106.108-.106h3.485c.07 0 .12.063.115.132-.026.226.017.459.125.67.206.42.636.682 1.099.682h1.726v-1.347H9.99a.11.11 0 0 1-.089-.173l.063-.09c.16-.231.391-.586.621-.992.156-.274.308-.566.43-.86.024-.052.043-.107.065-.16.033-.094.067-.182.091-.269a4.57 4.57 0 0 0 .065-.223c.057-.25.081-.514.081-.787 0-.108-.004-.221-.014-.327-.005-.117-.02-.235-.034-.352a3.415 3.415 0 0 0-.048-.312 6.494 6.494 0 0 0-.098-.468l-.014-.06c-.03-.108-.056-.21-.09-.317a11.824 11.824 0 0 0-.328-.972 5.212 5.212 0 0 0-.142-.355c-.072-.178-.146-.339-.213-.49a3.564 3.564 0 0 1-.094-.197 4.658 4.658 0 0 0-.103-.213c-.024-.053-.053-.104-.072-.152l-.211-.388c-.029-.053.019-.118.077-.101l1.32.357h.01l.173.05.192.054.07.019v-.783c0-.379.302-.686.679-.686a.66.66 0 0 1 .477.202.69.69 0 0 1 .2.484V6.65l.141.039c.01.005.022.01.031.017.034.024.084.062.147.11.05.038.103.086.165.137a10.351 10.351 0 0 1 .574.504c.214.199.454.432.684.691.065.074.127.146.192.226.062.079.132.156.19.232.079.104.16.212.235.324.033.053.074.108.105.161.096.142.178.288.257.435.034.067.067.141.096.213.089.197.159.396.202.598a.65.65 0 0 1 .029.132v.01c.014.057.019.12.024.184a2.057 2.057 0 0 1-.106.874c-.031.084-.06.17-.098.254-.075.17-.161.343-.264.502-.034.06-.075.122-.113.182-.043.063-.089.123-.127.18a3.89 3.89 0 0 1-.173.221c-.053.072-.106.144-.166.209-.081.098-.16.19-.245.278-.048.058-.1.118-.156.17-.052.06-.108.113-.156.161-.084.084-.15.147-.208.202l-.137.122a.102.102 0 0 1-.072.03h-1.051v1.346h1.322c.295 0 .576-.104.804-.298.077-.067.415-.36.816-.802a.094.094 0 0 1 .05-.03l3.65-1.057a.108.108 0 0 1 .138.103z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/onboarding/OpCreditsGrantedModal.tsx b/apps/dashboard/src/components/onboarding/OpCreditsGrantedModal.tsx
@@ -6,7 +6,6 @@ import {
   AccordionPanel,
   Box,
   Flex,
-  Icon,
   Modal,
   ModalBody,
   ModalContent,
@@ -16,10 +15,10 @@ import {
   SimpleGrid,
 } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
+import { OpenseaIcon } from "components/icons/brand-icons/OpenseaIcon";
+import { XIcon } from "components/icons/brand-icons/XIcon";
 import { formatToDollars } from "components/settings/Account/Billing/CreditsButton";
 import { useMemo } from "react";
-import { FaXTwitter } from "react-icons/fa6";
-import { SiOpensea } from "react-icons/si";
 import { Card, Heading, Text, TrackedLinkButton } from "tw-components";
 
 interface OpCreditsGrantedModalProps {
@@ -130,7 +129,7 @@ Apply here!`,
                   category="op-sponsorship"
                   label="share-on-x"
                 >
-                  <Icon as={FaXTwitter} boxSize={6} mr={2} />
+                  <XIcon className="mr-2 size-6" />
                   Post
                 </TrackedLinkButton>
                 <TrackedLinkButton
@@ -141,7 +140,7 @@ Apply here!`,
                   category="op-sponsorship"
                   label="view-nft"
                 >
-                  <Icon as={SiOpensea} boxSize={6} mr={2} />
+                  <OpenseaIcon className="mr-2 size-6" />
                   View NFT
                 </TrackedLinkButton>
               </SimpleGrid>

diff --git a/apps/dashboard/src/components/shared/GeneralCta.tsx b/apps/dashboard/src/components/shared/GeneralCta.tsx
@@ -1,6 +1,5 @@
-import { Box, Icon } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { BsLightningCharge } from "react-icons/bs";
+import { ZapIcon } from "lucide-react";
 import {
   type ButtonProps,
   LinkButton,
@@ -25,13 +24,7 @@ export const GeneralCta: React.FC<GeneralCtaProps> = ({
     <LinkButton
       role="group"
       leftIcon={
-        <Icon
-          as={BsLightningCharge}
-          color="#1D64EF"
-          transitionDuration="slow"
-          transitionTimingFunction="easeOut"
-          _groupHover={{ color: "#E0507A" }}
-        />
+        <ZapIcon className="size-5 text-[#1D64EF] duration-150 ease-out group-hover:text-[#E0507A]" />
       }
       color="black"
       px={size === "lg" ? 20 : 8}
@@ -53,9 +46,7 @@ export const GeneralCta: React.FC<GeneralCtaProps> = ({
       href={href}
       {...props}
     >
-      <Box as="span" py={0.5}>
-        {title}
-      </Box>
+      <span className="py-0.5">{title}</span>
     </LinkButton>
   );
 };
diff --git a/apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx b/apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { Box, Flex, Icon, Input, Spinner } from "@chakra-ui/react";
+import { Box, Flex, Input, Spinner } from "@chakra-ui/react";
 import { useEns } from "components/contract-components/hooks";
+import { CheckIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { FiCheck } from "react-icons/fi";
 import { useActiveAccount } from "thirdweb/react";
 import { isAddress } from "thirdweb/utils";
 import { FormHelperText } from "tw-components";
@@ -105,7 +105,7 @@ export const SolidityAddressInput: React.FC<SolidityInputProps> = ({
   const helperTextLeft = resolvingEns ? (
     <Spinner boxSize={3} mr={1} size="xs" speed="0.6s" />
   ) : resolvedAddress || ensFound ? (
-    <Icon boxSize={3} as={FiCheck} color="green.500" />
+    <CheckIcon className="size-3 text-green-500" />
   ) : null;
 
   const helperTextRight = resolvingEns ? (

diff --git a/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx b/apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { Flex, Icon, IconButton, Select, Skeleton } from "@chakra-ui/react";
+import { Flex, IconButton, Select, Skeleton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
-import { useMemo, useState } from "react";
 import {
-  MdFirstPage,
-  MdLastPage,
-  MdNavigateBefore,
-  MdNavigateNext,
-} from "react-icons/md";
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { getAccounts, totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
@@ -101,13 +101,13 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
           <IconButton
             isDisabled={totalAccountsQuery.isPending}
             aria-label="first page"
-            icon={<Icon as={MdFirstPage} />}
+            icon={<ChevronFirstIcon className="size-4" />}
             onClick={() => setCurrentPage(0)}
           />
           <IconButton
             isDisabled={totalAccountsQuery.isPending || !canPreviousPage}
             aria-label="previous page"
-            icon={<Icon as={MdNavigateBefore} />}
+            icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => {
               setCurrentPage((curr) => {
                 if (curr > 0) {
@@ -130,7 +130,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
           <IconButton
             isDisabled={totalAccountsQuery.isPending || !canNextPage}
             aria-label="next page"
-            icon={<Icon as={MdNavigateNext} />}
+            icon={<ChevronRightIcon className="size-4" />}
             onClick={() =>
               setCurrentPage((curr) => {
                 if (curr < totalPages - 1) {
@@ -143,7 +143,7 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
           <IconButton
             isDisabled={totalAccountsQuery.isPending || !canNextPage}
             aria-label="last page"
-            icon={<Icon as={MdLastPage} />}
+            icon={<ChevronLastIcon className="size-4" />}
             onClick={() => setCurrentPage(totalPages - 1)}
           />
 

diff --git a/...ashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx b/...ashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/phase.tsx
@@ -1,7 +1,6 @@
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
-import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
-import { FiX } from "react-icons/fi";
-import { RxCaretDown, RxCaretUp } from "react-icons/rx";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
+import { ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Badge, Button, Card, Heading, Text } from "tw-components";
 import { ClaimConditionTypeData, useClaimConditionsFormContext } from ".";
@@ -57,10 +56,11 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
             onClick={toggleEditing}
             size="sm"
             rightIcon={
-              <Icon
-                as={field.isEditing ? RxCaretUp : RxCaretDown}
-                boxSize={5}
-              />
+              field.isEditing ? (
+                <ChevronUpIcon className="size-4" />
+              ) : (
+                <ChevronDownIcon className="size-4" />
+              )
             }
           >
             {field.isEditing ? "Collapse" : isAdmin ? "Edit" : "See Phase"}
@@ -72,7 +72,7 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
               isDisabled={isPending}
               colorScheme="red"
               size="sm"
-              rightIcon={<Icon as={FiX} />}
+              rightIcon={<XIcon className="size-4" />}
             >
               Remove
             </Button>

diff --git a/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx b/apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx
@@ -6,7 +6,6 @@ import {
   Box,
   Flex,
   FormControl,
-  Icon,
   Input,
   Select,
   Spinner,
@@ -21,10 +20,9 @@ import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
-import { CircleAlertIcon } from "lucide-react";
+import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
-import { FiInfo } from "react-icons/fi";
 import { toast } from "sonner";
 import {
   NATIVE_TOKEN_ADDRESS,
@@ -366,12 +364,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
         {!isSupportedChain ? (
           <Flex flexDir="column" gap={4} mb={4}>
             <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px] dark:border-orange-300 dark:bg-orange-300">
-              <Icon
-                as={FiInfo}
-                color="orange.400"
-                _dark={{ color: "orange.900" }}
-                boxSize={6}
-              />
+              <InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
               <Text color="orange.800" _dark={{ color: "orange.900" }}>
                 This chain is not supported by our NFT API yet, please enter the
                 contract address of the NFT you want to list.
@@ -462,12 +455,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           </Flex>
         ) : nfts && nfts.length === 0 ? (
           <div className="flex flex-row items-center gap-3 rounded-md border border-border border-orange-100 bg-orange-50 p-[10px] dark:border-orange-300 dark:bg-orange-300">
-            <Icon
-              as={FiInfo}
-              color="orange.400"
-              _dark={{ color: "orange.900" }}
-              boxSize={6}
-            />
+            <InfoIcon className="size-6 text-orange-400 dark:text-orange-900" />
             <Text color="orange.800" _dark={{ color: "orange.900" }}>
               There are no NFTs owned by this wallet. You need NFTs to create a
               listing. You can create NFTs with thirdweb.{" "}

diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/reveal-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 { FiEye } from "react-icons/fi";
+import { useDisclosure } from "@chakra-ui/react";
+import { EyeIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { getBatchesToReveal } from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
@@ -36,7 +36,7 @@ export const NFTRevealButton: React.FC<NFTRevealButtonProps> = ({
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Icon as={FiEye} />}
+        leftIcon={<EyeIcon className="size-4" />}
         onClick={onOpen}
       >
         Reveal NFTs

diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx
@@ -6,16 +6,15 @@ import {
   Box,
   ButtonGroup,
   Flex,
-  Icon,
   List,
   SimpleGrid,
   Spinner,
   Tooltip,
 } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
+import { CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { FiCopy } from "react-icons/fi";
 import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -179,7 +178,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
                   toast.info("Transaction hash copied.");
                 }}
               >
-                <Icon as={FiCopy} boxSize={3} />
+                <CopyIcon className="size-3" />
               </Button>
             </Tooltip>
             <Text fontFamily="mono" noOfLines={1}>