Update

thirdweb-dev · Sep 25, 2024 · 2c5187c · 2c5187c
1 parent 1d3acf6
commit 2c5187c
Show file tree

Hide file tree

Showing 19 changed files with 64 additions and 71 deletions.
diff --git a/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx b/apps/dashboard/src/components/FTUX/components/GraphicContainer.tsx
@@ -22,6 +22,7 @@ export const GraphicContainer: React.FC<SlideStateProps> = ({
 
   return (
     <div className="relative aspect-[16/9] w-full md:aspect-square">
+      {/* @to be completed */}
       <Center
         as={motion.div}
         initial={`slide-${slideIndex}`}

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
@@ -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/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>

diff --git a/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx b/apps/dashboard/src/components/settings/Account/Billing/CreditsItem.tsx
@@ -45,7 +45,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
   return (
     <Card p={6} as={Flex} flexDir="column" gap={3}>
       <Flex flexDir="column" gap={4}>
-        <Flex gap={2}>
+        <div className="flex flex-row gap-2">
           {isOpCredit ? (
             <ChainIcon
               ipfsSrc=// Hard-coded here to remove @thirdweb dev/chains
@@ -87,7 +87,7 @@ export const CreditsItem: React.FC<CreditsItemProps> = ({
               Apply Now
             </LinkButton>
           )}
-        </Flex>
+        </div>
         <Flex gap={6}>
           <Flex flexDir="column" gap={1}>
             <Text>Remaining Credits</Text>

diff --git a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
@@ -206,7 +206,7 @@ export const MiniPlayground: React.FC<{
           <Flex flexDir="column" gap={10} order={[1, 0]}>
             {/* Theme */}
             <FormItem label="Theme">
-              <Flex gap={2}>
+              <div className="flex flex-row gap-2">
                 <ThemeButton
                   trackingCategory={trackingCategory}
                   theme="dark"
@@ -226,13 +226,13 @@ export const MiniPlayground: React.FC<{
                     setSelectedBrand("default");
                   }}
                 />
-              </Flex>
+              </div>
             </FormItem>
 
             {/* modal size */}
             {!isMobile && (
               <FormItem label="Modal Size">
-                <Flex gap={2}>
+                <div className="flex flex-row gap-2">
                   <ModalSizeButton
                     trackingCategory={trackingCategory}
                     theme={selectedTheme}
@@ -252,7 +252,7 @@ export const MiniPlayground: React.FC<{
                       setModalSize("compact");
                     }}
                   />
-                </Flex>
+                </div>
               </FormItem>
             )}