thirdweb-dev · graphite-app · Oct 15, 2024 · Oct 15, 2024
@@ -1,6 +1,6 @@
-import { Flex, Icon, Image } from "@chakra-ui/react";
+import { Flex, Image } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { FiCalendar, FiClock } from "react-icons/fi";
+import { CalendarIcon, ClockIcon } from "lucide-react";
 import { Card, Heading, LinkButton, Text } from "tw-components";
 
 interface EventProps {
@@ -53,7 +53,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
             }}
           >
             <Flex align="center" gap={1} wrap="wrap">
-              <Icon as={FiCalendar} color="gray.300" />
+              <CalendarIcon className="size-4 text-gray-300" />
               <Text color="gray.300">
                 {new Date(timestamp).toLocaleDateString("en-US", {
                   weekday: "long",
@@ -64,7 +64,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
               </Text>
             </Flex>
             <Flex align="center" gap={1}>
-              <Icon as={FiClock} color="gray.300" />
+              <ClockIcon className="size-4 text-gray-300" />
               <Text color="gray.300">
                 {new Date(timestamp).toLocaleTimeString("en-US", {
                   hour: "numeric",

@@ -1,6 +1,5 @@
-import { Flex, Icon, Tooltip } from "@chakra-ui/react";
-import { AiOutlineDollarCircle } from "react-icons/ai";
-import { IoCheckmarkCircle } from "react-icons/io5";
+import { Flex, Tooltip } from "@chakra-ui/react";
+import { CircleCheckIcon, CircleDollarSignIcon } from "lucide-react";
 import { Card, Text } from "tw-components";
 
 interface FeatureItemProps {
@@ -12,7 +11,7 @@ export const FeatureItem: React.FC<FeatureItemProps> = ({ text }) => {
 
   return (
     <Flex gap={2} alignItems="flex-start">
-      <Icon as={IoCheckmarkCircle} boxSize={5} mt={0.5} />
+      <CircleCheckIcon className="size-6 fill-white text-black" />
       {Array.isArray(text) ? (
         <Flex alignItems="center" justifyItems="center" gap={2}>
           <Text>{titleStr}</Text>
@@ -34,13 +33,7 @@ export const FeatureItem: React.FC<FeatureItemProps> = ({ text }) => {
             boxShadow="none"
           >
             <Flex display={{ base: "none", md: "block" }} mb={-0.5}>
-              <Icon
-                position="relative"
-                top={0.5}
-                as={AiOutlineDollarCircle}
-                boxSize={4}
-                color="blue.500"
-              />
+              <CircleDollarSignIcon className="relative size-4 text-blue-500" />
             </Flex>
           </Tooltip>
           <Text

@@ -10,7 +10,6 @@ import {
   Divider,
   Flex,
   GridItem,
-  Icon,
   Input,
   Progress,
   SimpleGrid,
@@ -22,10 +21,9 @@ import { PINNED_FILES_QUERY_KEY_ROOT } from "components/storage/your-files";
 import { useErrorHandler } from "contexts/error-handler";
 import { useTrack } from "hooks/analytics/useTrack";
 import { replaceIpfsUrl } from "lib/sdk";
+import { ExternalLinkIcon, Trash2Icon, UploadIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { BsFillCloudUploadFill } from "react-icons/bs";
-import { FiExternalLink, FiTrash2, FiUploadCloud } from "react-icons/fi";
 import { toast } from "sonner";
 import { MediaRenderer } from "thirdweb/react";
 import { useActiveAccount } from "thirdweb/react";
@@ -92,7 +90,7 @@ export const IpfsUploadDropzone: React.FC = () => {
         ) : (
           <div
             className={cn(
-              "flex items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400",
+              "flex h-full items-center justify-center rounded-xl border-2 border-border border-solid bg-transparent hover:border-blue-600 dark:border-blue-400",
               address ? "cursor-pointer" : "cursor-default",
             )}
             {...getRootProps()}
@@ -101,29 +99,13 @@ export const IpfsUploadDropzone: React.FC = () => {
 
             {
               <Flex direction="column" gap={2} p={6} align="center">
+                <UploadIcon className="mb-2 size-8 text-gray-600" />
                 {isDragActive ? (
-                  <>
-                    <Icon
-                      as={BsFillCloudUploadFill}
-                      boxSize={8}
-                      mb={2}
-                      color="gray.600"
-                    />
-                    <Text size="label.lg">Drop the files here</Text>
-                  </>
+                  <Text size="label.lg">Drop the files here</Text>
                 ) : (
-                  <>
-                    <Icon
-                      as={BsFillCloudUploadFill}
-                      boxSize={8}
-                      mb={2}
-                      color="gray.600"
-                    />
-                    <Text size="label.lg" textAlign="center" lineHeight="150%">
-                      Drag and drop your file or folder here to upload it to
-                      IPFS
-                    </Text>
-                  </>
+                  <Text size="label.lg" textAlign="center" lineHeight="150%">
+                    Drag and drop your file or folder here to upload it to IPFS
+                  </Text>
                 )}
               </Flex>
             }
@@ -260,7 +242,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                         category={TRACKING_CATEGORY}
                         label="open-in-gateway"
                         aria-label="Open in gateway"
-                        icon={<Icon as={FiExternalLink} />}
+                        icon={<ExternalLinkIcon className="size-4" />}
                         variant="ghost"
                         isExternal
                         size="sm"
@@ -285,7 +267,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                         aria-label="Remove File"
                         category={TRACKING_CATEGORY}
                         label="remove-file"
-                        icon={<Icon as={FiTrash2} />}
+                        icon={<Trash2Icon className="size-4" />}
                         variant="ghost"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -465,7 +447,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 category={TRACKING_CATEGORY}
                 href={mainIpfsUri}
                 textDecor="none!important"
-                rightIcon={<Icon as={FiExternalLink} />}
+                rightIcon={<ExternalLinkIcon className="size-4" />}
                 colorScheme="green"
                 isExternal
                 onClick={() => {
@@ -483,7 +465,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 isLoading={storageUpload.isPending}
                 loadingText="Uploading..."
                 colorScheme="green"
-                leftIcon={<Icon as={FiUploadCloud} />}
+                leftIcon={<UploadIcon className="size-4" />}
                 onClick={() => {
                   setIpfsHashes([]);
                   trackEvent({

@@ -1,6 +1,6 @@
-import { Flex, Icon, SimpleGrid } from "@chakra-ui/react";
+import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { GuideCard } from "components/product-pages/common/GuideCard";
-import { FiArrowRight } from "react-icons/fi";
+import { MoveRightIcon } from "lucide-react";
 import { Heading, TrackedLink, type TrackedLinkProps } from "tw-components";
 
 type BlogPost = {
@@ -94,7 +94,7 @@ export const LandingGuidesShowcase: React.FC<LandingGuidesShowcaseProps> = ({
             >
               {customSolution}
             </Heading>
-            <Icon as={FiArrowRight} />
+            <MoveRightIcon className="size-4" />
           </Flex>
         </TrackedLink>
       )}
@@ -121,7 +121,7 @@ export const LandingGuidesShowcase: React.FC<LandingGuidesShowcaseProps> = ({
               See all of our {solution.replace("-", " ")}{" "}
               {caseStudies ? "case studies" : "guides"}
             </Heading>
-            <Icon as={FiArrowRight} />
+            <MoveRightIcon className="size-4" />
           </Flex>
         </TrackedLink>
       )}

@@ -1,9 +1,8 @@
-import { Flex, Icon } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
+import { FileTextIcon, SquareTerminalIcon } from "lucide-react";
 import { themes } from "prism-react-renderer";
 import { useState } from "react";
-import { AiOutlineCode } from "react-icons/ai";
-import { CgFileDocument } from "react-icons/cg";
 import {
   Card,
   CodeBlock,
@@ -155,12 +154,12 @@ export const CodeSelector: React.FC<CodeSelectorProps> = ({
         />
 
         {/* Links for Replit and Docs  */}
-        <Flex justify="end" gap={6} position="absolute" bottom={0} right={2}>
+        <Flex justify="end" gap={4} position="absolute" bottom={0} right={2}>
           <CustomLinkButton
             px={4}
             text="Docs"
             href={docs}
-            icon={<Icon color="white" as={CgFileDocument} />}
+            icon={<FileTextIcon className="size-4 text-white" />}
             onClick={() =>
               trackEvent({
                 category: "code-selector",
@@ -173,7 +172,7 @@ export const CodeSelector: React.FC<CodeSelectorProps> = ({
           <CustomLinkButton
             text="Run"
             href={`https://replit.com/@thirdweb/${activeLanguage}-sdk`}
-            icon={<Icon color="white" as={AiOutlineCode} />}
+            icon={<SquareTerminalIcon className="size-4 text-white" />}
             onClick={() =>
               trackEvent({
                 category: "code-selector",

@@ -6,9 +6,9 @@ import { useStore } from "@/lib/reactive";
 import { popularChains } from "@3rdweb-sdk/react/components/popularChains";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { useActiveChainAsDashboardChain } from "lib/v5-adapter";
+import { ChevronDownIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { BiChevronDown } from "react-icons/bi";
 import { useActiveWallet } from "thirdweb/react";
 import { useNetworkSwitcherModal } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../app/(dashboard)/(chain)/components/client/star-button";
@@ -199,7 +199,7 @@ export const NetworkSelectorButton: React.FC<NetworkSelectorButtonProps> = ({
         <ChainIcon ipfsSrc={chain?.icon?.url} size={20} />
         {chain?.name || "Select Network"}
 
-        <BiChevronDown className="ml-auto size-4" />
+        <ChevronDownIcon className="ml-auto size-4" />
       </Button>
 
       <LazyConfigureNetworkModal