Update

kien-ngo · kien-ngo · commit 7d5099a16be6 · 2024-09-26T22:04:50.000+07:00
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -35,7 +35,7 @@ import type {
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { LOCAL_NODE_PKEY } from "constants/misc";
 import { useTrack } from "hooks/analytics/useTrack";
-import { ExternalLinkIcon, TriangleAlert } from "lucide-react";
+import { ExternalLinkIcon, TriangleAlertIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
@@ -447,7 +447,7 @@ const MismatchNotice: React.FC<{
     <div className="flex flex-col gap-4">
       <Heading size="label.lg">
         <div className="flex flex-row items-center gap-2">
-          <TriangleAlert />
+          <TriangleAlertIcon className="size-6" />
           <span>Network Mismatch</span>
         </div>
       </Heading>
diff --git a/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx b/apps/dashboard/src/components/hackathon/HacakthonEarnFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Wand } from "lucide-react";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -60,7 +60,7 @@ export const HackathonEarnFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Wand />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/HackathonFooter.tsx b/apps/dashboard/src/components/hackathon/HackathonFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Wand } from "lucide-react";
+import { WandIcon } from "lucide-react";
 import { FiSearch } from "react-icons/fi";
 import { Heading, LinkButton } from "tw-components";
 
@@ -56,7 +56,7 @@ export const HackathonFooter = ({
           h="68px"
           w={{ base: "90%", md: 80 }}
           fontSize="20px"
-          leftIcon={<Wand />}
+          leftIcon={<WandIcon className="size-6" />}
           color="black"
           flexShrink={0}
           background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx b/apps/dashboard/src/components/hackathon/common/ScheduleSection.tsx
@@ -1,6 +1,6 @@
 import { Flex, LinkBox, LinkOverlay } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { MoveRight } from "lucide-react";
+import { MoveRightIcon } from "lucide-react";
 import { Badge, Heading, LinkButton, Text } from "tw-components";
 
 interface ScheduleItem {
@@ -108,10 +108,7 @@ export const ScheduleSection: React.FC<ScheduleSectionProps> = ({
                 </Flex>
               </LinkOverlay>
             </Flex>
-            <MoveRight
-              size={16}
-              className="ml-auto hidden text-gray-300 md:block"
-            />
+            <MoveRightIcon className="ml-auto hidden size-4 text-gray-300 md:block" />
           </Flex>
         ))}
       </Flex>
diff --git a/apps/dashboard/src/components/homepage/CodeBlock/index.tsx b/apps/dashboard/src/components/homepage/CodeBlock/index.tsx
@@ -9,7 +9,7 @@ import {
   useTheme,
 } from "@chakra-ui/react";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useEffect, useRef, useState } from "react";
 import { BsLightning } from "react-icons/bs";
@@ -162,9 +162,9 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
               size="sm"
               icon={
                 hasCopied ? (
-                  <Check className="text-green-500" size={14} />
+                  <CheckIcon className="size-4 text-green-500" />
                 ) : (
-                  <Copy size={14} />
+                  <CopyIcon className="size-4" />
                 )
               }
             />
diff --git a/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/MobileMenu.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   type FlexProps,
-  Icon,
   IconButton,
   ListItem,
   UnorderedList,
@@ -106,17 +105,15 @@ const MobileNavSection: React.FC<MobileNavSectionProps> = ({
               size="label.md"
               onClick={onItemClick}
             >
-              {link.icon ? (
+              {link.icon && (
                 <ChakraNextImage
                   alt=""
                   boxSize={5}
                   src={link.icon}
                   sizes="40px"
                   w={5}
                 />
-              ) : link.iconType ? (
-                <Icon as={link.iconType} h={4} w={5} />
-              ) : null}
+              )}
               {link.name}
             </Heading>
           </ListItem>
diff --git a/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/NavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Icon, Stack } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -9,7 +9,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
   label,
   link,
   icon,
-  iconType,
   comingSoon,
 }) => {
   return (
@@ -26,14 +25,6 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
           {icon && (
             <ChakraNextImage boxSize={7} mb="-4px" src={icon} alt="icon" />
           )}
-          {iconType && (
-            <Icon
-              as={iconType}
-              color={comingSoon ? "whiteAlpha.400" : "white"}
-              boxSize={6}
-              mr={2}
-            />
-          )}
           <div className="flex flex-col">
             <Text
               fontWeight="bold"
diff --git a/apps/dashboard/src/components/product-pages/common/nav/types.ts b/apps/dashboard/src/components/product-pages/common/nav/types.ts
@@ -1,4 +1,3 @@
-import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 
 export interface SectionProps {
@@ -8,7 +7,6 @@ export interface SectionProps {
   icon?: StaticImageData;
   link?: string;
   section?: "contracts-v2" | "connect-v2" | "engine-v2";
-  iconType?: IconType;
   comingSoon?: boolean;
 }
 
@@ -20,7 +18,6 @@ export interface SectionItemProps {
   link: string;
   dashboardLink?: string;
   icon?: StaticImageData;
-  iconType?: IconType;
   comingSoon?: boolean;
   inLandingPage?: boolean;
   section:
diff --git a/apps/dashboard/src/components/shared/FileInput.tsx b/apps/dashboard/src/components/shared/FileInput.tsx
@@ -2,7 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
-import { Eye, FilePlus } from "lucide-react";
+import { EyeIcon, FilePlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback } from "react";
 import {
@@ -181,13 +181,14 @@ export const FileInput: React.FC<IFileInputProps> = ({
               disabled={isDisabled}
               className="gap-2"
             >
-              <FilePlus size={16} /> {selectOrUpload} {helperTextOrFile}
+              <FilePlusIcon className="size-4" /> {selectOrUpload}{" "}
+              {helperTextOrFile}
             </Button>
           )}
           {noDisplay && (
             <Link href={fileUrl} target="_blank" className="no-underline">
               <Button variant="outline" className="gap-2">
-                <Eye size={16} />
+                <EyeIcon className="size-4" />
                 View File
               </Button>
             </Link>
diff --git a/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx b/apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx
@@ -12,7 +12,7 @@ import {
 import { useTrack } from "hooks/analytics/useTrack";
 import { useClipboard } from "hooks/useClipboard";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { Check, Copy } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 import type { ThirdwebContract } from "thirdweb";
@@ -566,7 +566,13 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                 chainId,
               });
             }}
-            leftIcon={hasCopied ? <Check size={14} /> : <Copy size={14} />}
+            leftIcon={
+              hasCopied ? (
+                <CheckIcon className="size-4" />
+              ) : (
+                <CopyIcon className="size-4" />
+              )
+            }
           >
             {hasCopied ? "Copied!" : "Copy to clipboard"}
           </Button>
diff --git a/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx b/apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx
@@ -25,7 +25,7 @@ import {
 } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
-import { CircleHelp } from "lucide-react";
+import { CircleHelpIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { Fragment, useMemo, useState } from "react";
@@ -398,7 +398,7 @@ const TransactionData: React.FC<TransactionDataProps> = ({
             }
           >
             <div className="flex items-center justify-center">
-              <CircleHelp className="text-gray-600" size={14} />
+              <CircleHelpIcon className="size-4 text-gray-600" />
             </div>
           </Tooltip>
 
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx
@@ -1,5 +1,5 @@
 import { useDisclosure } from "@chakra-ui/react";
-import { Gem } from "lucide-react";
+import { GemIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { NFTClaimForm } from "./claim-form";
@@ -28,7 +28,7 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
       </Drawer>
       <Button
         colorScheme="primary"
-        leftIcon={<Gem size={16} />}
+        leftIcon={<GemIcon className="size-4" />}
         onClick={onOpen}
       >
         Claim
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -13,11 +13,10 @@ import {
   Textarea,
 } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AiFillEye } from "@react-icons/all-files/ai/AiFillEye";
-import { AiFillEyeInvisible } from "@react-icons/all-files/ai/AiFillEyeInvisible";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { FileInput } from "components/shared/FileInput";
 import { useImageFileOrUrl } from "hooks/useImageFileOrUrl";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useForm } from "react-hook-form";
@@ -396,10 +395,17 @@ const SelectReveal: React.FC<SelectRevealProps> = ({
                         type={show ? "text" : "password"}
                       />
                       <InputRightElement cursor="pointer">
-                        <Icon
-                          as={show ? AiFillEye : AiFillEyeInvisible}
-                          onClick={() => setShow(!show)}
-                        />
+                        {show ? (
+                          <EyeIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        ) : (
+                          <EyeOffIcon
+                            onClick={() => setShow(!show)}
+                            className="size-3"
+                          />
+                        )}
                       </InputRightElement>
                     </InputGroup>
 
diff --git a/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx b/apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
@@ -1,12 +1,5 @@
-import {
-  Flex,
-  Icon,
-  Radio,
-  Stack,
-  type StackProps,
-  Tooltip,
-} from "@chakra-ui/react";
-import { AiOutlineInfoCircle } from "@react-icons/all-files/ai/AiOutlineInfoCircle";
+import { Flex, Radio, Stack, type StackProps, Tooltip } from "@chakra-ui/react";
+import { InfoIcon } from "lucide-react";
 import type { MouseEventHandler } from "react";
 import { Card, Heading, Text } from "tw-components";
 
@@ -97,7 +90,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
                 }
               >
                 <Flex alignItems="center">
-                  <Icon as={AiOutlineInfoCircle} boxSize={5} />
+                  <InfoIcon className="size-4" />
                 </Flex>
               </Tooltip>
             </div>
diff --git a/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx b/apps/dashboard/src/pages/hackathon/consumer-crypto.tsx
@@ -12,7 +12,7 @@ import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
-import { Wand } from "lucide-react";
+import { WandIcon } from "lucide-react";
 import { NextSeo } from "next-seo";
 import dynamic from "next/dynamic";
 import { PageId } from "page-id";
@@ -138,7 +138,7 @@ const Hackathon = () => {
               h="68px"
               w={{ base: "100%", md: 96 }}
               fontSize="20px"
-              leftIcon={<Wand />}
+              leftIcon={<WandIcon className="size-6" />}
               color="black"
               flexShrink={0}
               background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/pages/hackathon/earn.tsx b/apps/dashboard/src/pages/hackathon/earn.tsx
@@ -11,7 +11,7 @@ import { HomepageTopNav } from "components/product-pages/common/Topnav";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { useTrack } from "hooks/analytics/useTrack";
 import { getAbsoluteUrl } from "lib/vercel-utils";
-import { Wand } from "lucide-react";
+import { WandIcon } from "lucide-react";
 import { NextSeo } from "next-seo";
 import dynamic from "next/dynamic";
 import { PageId } from "page-id";
@@ -149,7 +149,7 @@ const HackathonEarn = () => {
               h="68px"
               w={{ base: "100%", md: 96 }}
               fontSize="20px"
-              leftIcon={<Wand />}
+              leftIcon={<WandIcon className="size-6" />}
               color="black"
               flexShrink={0}
               background="rgba(255,255,255,1)"
diff --git a/apps/dashboard/src/tw-components/code-block.tsx b/apps/dashboard/src/tw-components/code-block.tsx
@@ -8,7 +8,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Highlight, Prism, themes } from "prism-react-renderer";
 import { Text } from "./text";
 
@@ -102,9 +102,9 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
               size="sm"
               icon={
                 hasCopied ? (
-                  <Check className="text-green-500" size={14} />
+                  <CheckIcon className="size-4 text-green-500" />
                 ) : (
-                  <Copy size={14} />
+                  <CopyIcon className="size-4" />
                 )
               }
             />
