Update

thirdweb-dev · Sep 24, 2024 · 3eba1e6 · 3eba1e6
1 parent a3e71c4
commit 3eba1e6
Show file tree

Hide file tree

Showing 44 changed files with 108 additions and 116 deletions.
diff --git a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
@@ -21,7 +21,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
   const Graphic = slides[slideIndex].graphic;
 
   return (
-    <div className="w-full relative aspect-[16/9] md:aspect-square">
+    <div className="relative aspect-[16/9] w-full md:aspect-square">
       {/* @to be completed */}
       <Center
         as={motion.div}

diff --git a/apps/dashboard/src/components/FTUX/components/Graphics.tsx b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
@@ -61,7 +61,7 @@ export const DashboardImage: React.FC = () => (
 
 export const ConnectWalletImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <div className="flex items-center justify-center h-full w-full">
+    <div className="flex h-full w-full items-center justify-center">
       <ChakraNextImage
         alt=""
         boxSize="75px"

diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -16,7 +16,6 @@ import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import {
   Box,
-  Flex,
   Icon,
   Popover,
   PopoverArrow,
@@ -446,12 +445,12 @@ const MismatchNotice: React.FC<{
   }, [chain?.name, isMobile]);
 
   return (
-    <Flex direction="column" gap={4}>
+    <div className="flex flex-col gap-4">
       <Heading size="label.lg">
-        <Flex gap={2} align="center">
+        <div className="flex flex-row items-center gap-2">
           <Icon boxSize={6} as={AiOutlineWarning} />
           <span>Network Mismatch</span>
-        </Flex>
+        </div>
       </Heading>
 
       <Text>
@@ -487,7 +486,7 @@ const MismatchNotice: React.FC<{
           Please manually switch the network in your wallet.
         </Text>
       )}
-    </Flex>
+    </div>
   );
 };
 

diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -203,12 +203,12 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
   if (walletId === "global.safe") {
     const isChainIdSupported = chainId in CHAIN_ID_TO_GNOSIS;
     return (
-      <Flex direction="column" gap={4}>
+      <div className="flex flex-col gap-4">
         <Heading size="label.lg">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <Icon color="primary.500" boxSize={6} as={FiInfo} />
             <span>Execute Transaction</span>
-          </Flex>
+          </div>
         </Heading>
         <Text>
           You will need to execute this transaction in your Safe to continue.
@@ -233,17 +233,17 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
         >
           Go To Safe
         </LinkButton>
-      </Flex>
+      </div>
     );
   }
   if (walletId === "walletConnect") {
     return (
-      <Flex direction="column" gap={4}>
+      <div className="flex flex-col gap-4">
         <Heading size="label.lg">
-          <Flex gap={2} align="center">
+          <div className="flex flex-row items-center gap-2">
             <Icon color="primary.500" boxSize={6} as={FiInfo} />
             <span>Approve Transaction</span>
-          </Flex>
+          </div>
         </Heading>
         <Text>
           You will need to approve this transaction in your connected wallet.
@@ -255,7 +255,7 @@ const ExternalApprovalNotice: React.FC<ExternalApprovalNoticeProps> = ({
             action will continue automatically.
           </Text>
         )}
-      </Flex>
+      </div>
     );
   }
 

diff --git a/apps/dashboard/src/components/chain-validation/index.tsx b/apps/dashboard/src/components/chain-validation/index.tsx
@@ -1,6 +1,5 @@
 import {
   Code,
-  Flex,
   FormControl,
   Icon,
   Input,
@@ -67,7 +66,7 @@ const ChainValidation: React.FC = () => {
 
   return (
     <Card maxW="xl">
-      <Flex direction="column" gap={6}>
+      <div className="flex flex-col gap-6">
         <FormControl gap={6}>
           <FormLabel>RPC URL</FormLabel>
           <InputGroup gap={2}>
@@ -177,7 +176,7 @@ const ChainValidation: React.FC = () => {
             </Table>
           </TableContainer>
         )}
-      </Flex>
+      </div>
     </Card>
   );
 };

diff --git a/apps/dashboard/src/components/connect/Carousel.tsx b/apps/dashboard/src/components/connect/Carousel.tsx
@@ -1,5 +1,5 @@
 import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Box, Flex, SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useCallback, useEffect, useState } from "react";
@@ -68,12 +68,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
   }, [selectedShowCaseIdx, canAnimate]);
 
   return (
-    <Flex
-      flexDir={{ base: "column", md: "row" }}
-      gap={{ base: "24px", md: 0 }}
-      alignItems="stretch"
-      w="full"
-    >
+    <div className="flex w-full flex-col items-stretch gap-6 md:flex-row md:gap-0">
       <Box
         w="full"
         display={{ base: "flex", md: "none" }}
@@ -153,7 +148,7 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
           );
         })}
       </SimpleGrid>
-      <Flex width="full" maxW="786px">
+      <div className="flex w-full max-w-[786px] flex-row">
         {showcaseImages.map((img, idx) => (
           <ChakraNextImage
             // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
@@ -175,8 +170,8 @@ const Carousel = ({ TRACKING_CATEGORY }: { TRACKING_CATEGORY: string }) => {
             priority
           />
         ))}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 };
 

diff --git a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
@@ -3,7 +3,6 @@
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   Box,
-  Flex,
   FormControl,
   Icon,
   Input,
@@ -177,10 +176,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
         >
           <FormControl isInvalid={!!errors.avatar}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={BiImage} boxSize={4} />
                 Avatar
-              </Flex>
+              </div>
             </FormLabel>
             <Box width={{ base: "auto", md: "250px" }}>
               <FileInput
@@ -200,10 +199,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.bio}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={HiPencilAlt} boxSize={4} />
                 Bio
-              </Flex>
+              </div>
             </FormLabel>
             <Textarea
               {...register("bio")}
@@ -214,10 +213,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.github}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiGithub} boxSize={4} />
                 GitHub
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("github")}
@@ -227,10 +226,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.twitter}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiTwitter} boxSize={4} />
                 Twitter
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("twitter")}
@@ -240,10 +239,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.website}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={FiGlobe} boxSize={4} />
                 Website
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("website")}
@@ -253,10 +252,10 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           </FormControl>
           <FormControl isInvalid={!!errors.discord}>
             <FormLabel>
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <Icon as={SiDiscord} boxSize={4} />
                 Discord
-              </Flex>
+              </div>
             </FormLabel>
             <Input
               {...register("discord")}

diff --git a/apps/dashboard/src/components/contract-functions/contract-functions.tsx b/apps/dashboard/src/components/contract-functions/contract-functions.tsx
@@ -93,9 +93,9 @@ export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
           ) : null}
           {abi && (
             <TabPanel>
-              <Flex direction="column" gap={6}>
+              <div className="flex flex-col gap-6">
                 <CodeOverview abi={abi} noSidebar />
-              </Flex>
+              </div>
             </TabPanel>
           )}
           {(sources || abi) && (

diff --git a/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx b/apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx
@@ -119,7 +119,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 cursor="pointer"
               >
                 {chain.icon?.url && (
-                  <div className="flex items-center justify-center w-5 h-5 mr-0 md:-mr-0.5 rounded-full">
+                  <div className="md:-mr-0.5 mr-0 flex h-5 w-5 items-center justify-center rounded-full">
                     <ChainIcon ipfsSrc={chain.icon.url} size={24} />
                   </div>
                 )}
@@ -154,7 +154,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             </Text>
           </Skeleton>
         )}
-        <Flex gap={2}>
+        <div className="flex flex-row gap-2">
           <AddressCopyButton size="xs" address={address} />
           {validBlockExplorers?.map((validBlockExplorer) => (
             <LinkButton
@@ -178,7 +178,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
               {e.name}
             </LinkButton>
           ))}
-        </Flex>
+        </div>
       </Flex>
     </Flex>
   );

diff --git a/apps/dashboard/src/components/engine/overview/engine-overview.tsx b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
@@ -71,10 +71,10 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
               </Text>
             </Flex>
 
-            <Flex gap={2}>
+            <div className="flex flex-row gap-2">
               <ImportBackendWalletButton instanceUrl={instanceUrl} />
               <CreateBackendWalletButton instanceUrl={instanceUrl} />
-            </Flex>
+            </div>
           </Flex>
 
           <Flex flexDirection="row-reverse">

diff --git a/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx b/apps/dashboard/src/components/engine/permissions/add-keypair-button.tsx
@@ -130,7 +130,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
           <ModalBody as={Flex} flexDir="column" gap={8}>
             <FormControl>
               <Stack>
-                <Flex gap={2}>
+                <div className="flex flex-row gap-2">
                   <Text>Create a private key using:</Text>
                   <Select
                     w="fit-content"
@@ -156,7 +156,7 @@ export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
                       </option>
                     ))}
                   </Select>
-                </Flex>
+                </div>
 
                 <CodeBlock
                   fontSize="small"

diff --git a/apps/dashboard/src/components/hackathon/common/Timer.tsx b/apps/dashboard/src/components/hackathon/common/Timer.tsx
@@ -51,7 +51,7 @@ const Timer: React.FC<TimerProps> = ({ date }) => {
   ];
 
   return (
-    <Flex gap={2}>
+    <div className="flex flex-row gap-2">
       {items.map(({ label, value }) => (
         <Flex flexDir="column" key={label} align="center">
           <Text
@@ -76,7 +76,7 @@ const Timer: React.FC<TimerProps> = ({ date }) => {
           </Text>
         </Flex>
       ))}
-    </Flex>
+    </div>
   );
 };
 

diff --git a/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx b/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
@@ -86,7 +86,7 @@ export const GameShowcase = () => {
           >
             <ModalCloseButton />
           </Box>
-          <div className="w-full aspect-[16/9]">
+          <div className="aspect-[16/9] w-full">
             <Box
               bg="#000"
               borderRadius={{ base: "md", md: "lg" }}

diff --git a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
@@ -18,8 +18,8 @@ export const GetStartedSection = () => {
         align="center"
         gap={{ base: 6, md: 8 }}
       >
-        <div className="flex items-center justify-center mb-6 pt-8 lg:pt-24">
-          <div className="flex items-center justify-center p-2 relative mb-6">
+        <div className="mb-6 flex items-center justify-center pt-8 lg:pt-24">
+          <div className="relative mb-6 flex items-center justify-center p-2">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"

diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
@@ -60,7 +60,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
     >
       <Flex flexDir="column" gap={6}>
         <Flex flexDir="column" gap={3}>
-          <Flex gap={2}>
+          <div className="flex flex-row gap-2">
             <Heading
               as="h3"
               size={size === "lg" ? "title.lg" : "title.sm"}
@@ -79,7 +79,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
                 Current plan
               </Badge>
             )}
-          </Flex>
+          </div>
           <Text maxW={320} h={12}>
             {plan.description}
           </Text>
@@ -174,7 +174,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
   if (highlighted) {
     return (
-      <div className="flex items-center justify-center relative p-2 -m-2">
+      <div className="-m-2 relative flex items-center justify-center p-2">
         <Box
           position="absolute"
           bgGradient="linear(to-b, #4DABEE, #692AC1)"