From f6cf5b5c863a81b2d8c0926b16abf119b11ba0f7 Mon Sep 17 00:00:00 2001 From: kien-ngo Date: Tue, 15 Oct 2024 02:42:11 +0000 Subject: [PATCH] [Dashboard] Remove react-icons (1) (#5005) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR focuses on replacing several instances of icon imports from `react-icons` with new icons from `lucide-react` across various components in the project, enhancing the consistency and modern look of the UI. ### Detailed summary - Replaced `AiOutlineInfoCircle` with `CirclePlusIcon` in `FormItem.tsx`. - Replaced `AiOutlinePlusCircle` with `CirclePlusIcon` in multiple buttons: `AddAdminButton`, `AddAccessTokenButton`, `AddKeypairButton`, `AddWebhookButton`, `AddRelayerButton`, `AddContractSubscriptionButton`. - Updated icons in `SettingDetectedState` from `VscExtensions` to `Grid2x2XIcon` and `FiExternalLink` to `ExternalLinkIcon`. - Replaced `BsShieldFillCheck` with `ShieldCheckIcon` and `FiArrowRight` with `MoveRightIcon` in `PublishedContractTable`. - Updated `ModalSizeButton` to use `ListIcon` and `Rows3Icon` instead of `FaRectangleList` and `RiFileListFill`. - In `PublishedContract`, replaced icons: `BiPencil` with `PencilIcon`, `VscCalendar` with `CalendarDaysIcon`, `VscBook` with `BookOpenTextIcon`, and `VscServer` with `ServerIcon`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../contract-table-v2/index.tsx | 8 +++--- .../published-contract/index.tsx | 27 +++++++++---------- .../configuration/add-webhook-button.tsx | 5 ++-- .../add-contract-subscription-button.tsx | 5 ++-- .../permissions/add-access-token-button.tsx | 5 ++-- .../engine/permissions/add-admin-button.tsx | 5 ++-- .../engine/permissions/add-keypair-button.tsx | 5 ++-- .../engine/relayer/add-relayer-button.tsx | 5 ++-- .../ConnectWalletPlayground/FormItem.tsx | 4 +-- .../ModalSizeButton.tsx | 20 +++++++------- .../settings/components/detected-state.tsx | 9 +++---- 11 files changed, 43 insertions(+), 55 deletions(-) diff --git a/apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx b/apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx index 4c64824929a..fadd2e2bedb 100644 --- a/apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx +++ b/apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx @@ -1,7 +1,6 @@ import { WalletAddress } from "@/components/blocks/wallet-address"; import { Flex, - Icon, Image, Spinner, Table, @@ -17,10 +16,9 @@ import { ChakraNextImage } from "components/Image"; import { replaceDeployerAddress } from "components/explore/publisher"; import { useTrack } from "hooks/analytics/useTrack"; import { replaceIpfsUrl } from "lib/sdk"; +import { MoveRightIcon, ShieldCheckIcon } from "lucide-react"; import { useRouter } from "next/router"; import { useMemo } from "react"; -import { BsShieldFillCheck } from "react-icons/bs"; -import { FiArrowRight } from "react-icons/fi"; import { type Column, type Row, useTable } from "react-table"; import { Card, @@ -139,7 +137,7 @@ export const PublishedContractTable: ComponentWithChildren< aria-label="Audited contract" colorScheme="green" variant="ghost" - icon={} + icon={} onClick={(e) => { e.stopPropagation(); trackEvent({ @@ -255,7 +253,7 @@ const ContractTableRow: React.FC = ({ row }) => { ))} - + diff --git a/apps/dashboard/src/components/contract-components/published-contract/index.tsx b/apps/dashboard/src/components/contract-components/published-contract/index.tsx index 816cb424913..61510d9efbc 100644 --- a/apps/dashboard/src/components/contract-components/published-contract/index.tsx +++ b/apps/dashboard/src/components/contract-components/published-contract/index.tsx @@ -1,23 +1,20 @@ "use client"; import { useThirdwebClient } from "@/constants/thirdweb.client"; -import { - Divider, - Flex, - GridItem, - Icon, - List, - ListItem, -} from "@chakra-ui/react"; +import { Divider, Flex, GridItem, List, ListItem } from "@chakra-ui/react"; import { useQuery } from "@tanstack/react-query"; import { ContractFunctionsOverview } from "components/contract-functions/contract-functions"; import { format } from "date-fns/format"; import { correctAndUniqueLicenses } from "lib/licenses"; import { replaceIpfsUrl } from "lib/sdk"; -import { ShieldCheckIcon } from "lucide-react"; +import { + BookOpenTextIcon, + CalendarDaysIcon, + PencilIcon, + ServerIcon, + ShieldCheckIcon, +} from "lucide-react"; import { useMemo } from "react"; -import { BiPencil } from "react-icons/bi"; -import { VscBook, VscCalendar, VscServer } from "react-icons/vsc"; import type { ThirdwebClient } from "thirdweb"; import { useActiveAccount } from "thirdweb/react"; import { download } from "thirdweb/storage"; @@ -112,7 +109,7 @@ export const PublishedContract: React.FC = ({ ml="auto" size="sm" variant="outline" - leftIcon={} + leftIcon={} href={`/contracts/publish/${encodeURIComponent( publishedContract.publishMetadataUri.replace("ipfs://", ""), )}`} @@ -166,7 +163,7 @@ export const PublishedContract: React.FC = ({ {publishedContract.publishTimestamp && ( - + Publish Date @@ -208,7 +205,7 @@ export const PublishedContract: React.FC = ({ )} - + License @@ -226,7 +223,7 @@ export const PublishedContract: React.FC = ({ hasFactoryAddresses) ? ( - + {publishedContract?.isDeployableViaFactory diff --git a/apps/dashboard/src/components/engine/configuration/add-webhook-button.tsx b/apps/dashboard/src/components/engine/configuration/add-webhook-button.tsx index ff1c6148ad5..385a77fe4a6 100644 --- a/apps/dashboard/src/components/engine/configuration/add-webhook-button.tsx +++ b/apps/dashboard/src/components/engine/configuration/add-webhook-button.tsx @@ -5,7 +5,6 @@ import { import { Flex, FormControl, - Icon, Input, Modal, ModalBody, @@ -19,8 +18,8 @@ import { } from "@chakra-ui/react"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; +import { CirclePlusIcon } from "lucide-react"; import { useForm } from "react-hook-form"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { Button, FormLabel } from "tw-components"; import { beautifyString } from "./webhooks-table"; @@ -57,7 +56,7 @@ export const AddWebhookButton: React.FC = ({ onClick={onOpen} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx b/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx index 1d59100a8ba..1526f864716 100644 --- a/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx +++ b/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx @@ -12,7 +12,6 @@ import { Collapse, Flex, FormControl, - Icon, Input, Modal, ModalBody, @@ -30,9 +29,9 @@ import { import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; import { useV5DashboardChain } from "lib/v5-adapter"; +import { CirclePlusIcon } from "lucide-react"; import { type Dispatch, type SetStateAction, useMemo, useState } from "react"; import { type UseFormReturn, useForm } from "react-hook-form"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { getContract, isAddress } from "thirdweb"; import { Button, @@ -59,7 +58,7 @@ export const AddContractSubscriptionButton: React.FC< onClick={disclosure.onOpen} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/engine/permissions/add-access-token-button.tsx b/apps/dashboard/src/components/engine/permissions/add-access-token-button.tsx index e570750aaae..0de1c6be3a7 100644 --- a/apps/dashboard/src/components/engine/permissions/add-access-token-button.tsx +++ b/apps/dashboard/src/components/engine/permissions/add-access-token-button.tsx @@ -1,7 +1,6 @@ import { useEngineCreateAccessToken } from "@3rdweb-sdk/react/hooks/useEngine"; import { Flex, - Icon, Modal, ModalBody, ModalContent, @@ -12,8 +11,8 @@ import { } from "@chakra-ui/react"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; +import { CirclePlusIcon } from "lucide-react"; import { useState } from "react"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { Button, Checkbox, CodeBlock, Text } from "tw-components"; interface AddAccessTokenButtonProps { @@ -64,7 +63,7 @@ export const AddAccessTokenButton: React.FC = ({ }} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/engine/permissions/add-admin-button.tsx b/apps/dashboard/src/components/engine/permissions/add-admin-button.tsx index 6d5e4dafcbb..e591a7a2859 100644 --- a/apps/dashboard/src/components/engine/permissions/add-admin-button.tsx +++ b/apps/dashboard/src/components/engine/permissions/add-admin-button.tsx @@ -5,7 +5,6 @@ import { import { Flex, FormControl, - Icon, Input, Modal, ModalBody, @@ -18,8 +17,8 @@ import { } from "@chakra-ui/react"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; +import { CirclePlusIcon } from "lucide-react"; import { useForm } from "react-hook-form"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { isAddress } from "thirdweb"; import { Button, FormLabel } from "tw-components"; @@ -50,7 +49,7 @@ export const AddAdminButton: React.FC = ({ onClick={onOpen} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx b/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx index 7d8d558423c..358ec4cf889 100644 --- a/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx +++ b/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx @@ -6,7 +6,6 @@ import { Alert, Flex, FormControl, - Icon, Input, Modal, ModalBody, @@ -20,8 +19,8 @@ import { } from "@chakra-ui/react"; import { useTrack } from "hooks/analytics/useTrack"; import { useTxNotifications } from "hooks/useTxNotifications"; +import { CirclePlusIcon } from "lucide-react"; import { useState } from "react"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { Button, CodeBlock, FormLabel, Text } from "tw-components"; const KEYPAIR_ALGORITHM_DETAILS: Record< @@ -108,7 +107,7 @@ export const AddKeypairButton: React.FC = ({ onClick={onOpen} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx b/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx index 9c271865f57..2917d83efd4 100644 --- a/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx +++ b/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx @@ -7,7 +7,6 @@ import { import { Flex, FormControl, - Icon, Input, Modal, ModalBody, @@ -24,8 +23,8 @@ import { import { useTrack } from "hooks/analytics/useTrack"; import { useAllChainsData } from "hooks/chains/allChains"; import { useTxNotifications } from "hooks/useTxNotifications"; +import { CirclePlusIcon } from "lucide-react"; import { useForm } from "react-hook-form"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { isAddress, shortenAddress } from "thirdweb/utils"; import { Button, FormHelperText, FormLabel } from "tw-components"; @@ -44,7 +43,7 @@ export const AddRelayerButton: React.FC = ({ onClick={disclosure.onOpen} variant="ghost" size="sm" - leftIcon={} + leftIcon={} colorScheme="primary" w="fit-content" > diff --git a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx index 0ec46bae67e..b72bc894258 100644 --- a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx +++ b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/FormItem.tsx @@ -1,5 +1,5 @@ import { Flex, FormControl, Tooltip } from "@chakra-ui/react"; -import { AiOutlineInfoCircle } from "react-icons/ai"; +import { CirclePlusIcon } from "lucide-react"; import { FormLabel } from "tw-components"; export const FormItem: React.FC<{ @@ -26,7 +26,7 @@ export const FormItem: React.FC<{ label={
{props.description}
} >
- +
)} diff --git a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/ModalSizeButton.tsx b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/ModalSizeButton.tsx index 2f1e67c1500..428549b63bc 100644 --- a/apps/dashboard/src/components/wallets/ConnectWalletPlayground/ModalSizeButton.tsx +++ b/apps/dashboard/src/components/wallets/ConnectWalletPlayground/ModalSizeButton.tsx @@ -1,7 +1,7 @@ -import { Icon, IconButton, Tooltip } from "@chakra-ui/react"; +import { ToolTipLabel } from "@/components/ui/tooltip"; +import { IconButton } from "@chakra-ui/react"; import { useTrack } from "hooks/analytics/useTrack"; -import { FaRectangleList } from "react-icons/fa6"; -import { RiFileListFill } from "react-icons/ri"; +import { ListIcon, Rows3Icon } from "lucide-react"; export function ModalSizeButton(props: { modalSize: "compact" | "wide"; @@ -12,7 +12,7 @@ export function ModalSizeButton(props: { }) { const trackEvent = useTrack(); return ( - + + props.modalSize === "wide" ? ( + + ) : ( + + ) } onClick={() => { props.onClick(); @@ -43,6 +43,6 @@ export function ModalSizeButton(props: { }); }} /> - + ); } diff --git a/apps/dashboard/src/contract-ui/tabs/settings/components/detected-state.tsx b/apps/dashboard/src/contract-ui/tabs/settings/components/detected-state.tsx index 76ac6d5b8d1..0a2864961a5 100644 --- a/apps/dashboard/src/contract-ui/tabs/settings/components/detected-state.tsx +++ b/apps/dashboard/src/contract-ui/tabs/settings/components/detected-state.tsx @@ -1,7 +1,6 @@ -import { Flex, Icon, SimpleGrid, Spinner } from "@chakra-ui/react"; +import { Flex, SimpleGrid, Spinner } from "@chakra-ui/react"; import type { ExtensionDetectedState } from "components/buttons/ExtensionDetectedState"; -import { FiExternalLink } from "react-icons/fi"; -import { VscExtensions } from "react-icons/vsc"; +import { ExternalLinkIcon, Grid2x2XIcon } from "lucide-react"; import { Heading, Text, TrackedLink } from "tw-components"; const settingTypeMap = { @@ -60,7 +59,7 @@ export const SettingDetectedState: React.FC = ({ ) : ( - + Missing extension @@ -78,7 +77,7 @@ export const SettingDetectedState: React.FC = ({ gap={2} > Learn how to enable this extension - + )}