Remove Flex

thirdweb-dev · Sep 24, 2024 · d64fdba · d64fdba
1 parent c5198d1
commit d64fdba
Show file tree

Hide file tree

Showing 29 changed files with 88 additions and 96 deletions.
diff --git a/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx b/apps/dashboard/src/components/engine/contract-subscription/engine-contract-subscription.tsx
@@ -36,7 +36,7 @@ export const EngineContractSubscriptions: React.FC<
             .
           </Text>
         </Flex>
-        <Flex>
+        <div className="flex flex-row">
           <FormControl display="flex" alignItems="center">
             <FormLabel htmlFor="auto-update" mb="0">
               Auto-Update
@@ -47,7 +47,7 @@ export const EngineContractSubscriptions: React.FC<
               id="auto-update"
             />
           </FormControl>
-        </Flex>
+        </div>
       </Flex>
       <ContractSubscriptionTable
         instanceUrl={instanceUrl}

diff --git a/apps/dashboard/src/components/engine/overview/engine-overview.tsx b/apps/dashboard/src/components/engine/overview/engine-overview.tsx
@@ -80,9 +80,9 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
           <Flex flexDirection="row-reverse">
             <Flex alignItems="center" gap={2}>
               <Text>Show balance for</Text>
-              <Flex>
+              <div className="flex flex-row">
                 <NetworkSelectorButton />
-              </Flex>
+              </div>
             </Flex>
           </Flex>
         </Flex>
@@ -104,7 +104,7 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
             </Text>
           </Flex>
 
-          <Flex>
+          <div className="flex flex-row">
             <FormControl display="flex" alignItems="center">
               <FormLabel htmlFor="auto-update" mb="0">
                 Auto-Update
@@ -115,7 +115,7 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
                 id="auto-update"
               />
             </FormControl>
-          </Flex>
+          </div>
         </Flex>
         <TransactionsTable
           transactions={transactionsQuery.data?.transactions ?? []}

diff --git a/apps/dashboard/src/components/engine/overview/transactions-table.tsx b/apps/dashboard/src/components/engine/overview/transactions-table.tsx
@@ -480,15 +480,15 @@ const TransactionDetailsDrawer = ({
         {/* On-chain details */}
 
         <FormControl>
-          <Flex>
+          <div className="flex flex-row">
             <FormLabel>Value</FormLabel>
             <Tooltip
               label={`The amount of ${symbol} sent to the "To" .`}
               shouldWrapChildren
             >
               <FiInfo />
             </Tooltip>
-          </Flex>
+          </div>
           <Text>
             {transaction.value
               ? toTokens(BigInt(transaction.value), decimals)
@@ -527,45 +527,45 @@ const TransactionDetailsDrawer = ({
               <Stack spacing={4}>
                 {transaction.nonce && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Nonce</FormLabel>
                       <Tooltip
                         label="The nonce value this transaction was submitted to mempool."
                         shouldWrapChildren
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{transaction.nonce ?? "N/A"}</Text>
                   </FormControl>
                 )}
 
                 {transaction.gasLimit && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Gas Units</FormLabel>
                       <Tooltip
                         label="The gas units spent for this transaction."
                         shouldWrapChildren
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{Number(transaction.gasLimit).toLocaleString()}</Text>
                   </FormControl>
                 )}
 
                 {transaction.gasPrice && (
                   <FormControl>
-                    <Flex>
+                    <div className="flex flex-row">
                       <FormLabel>Gas Price</FormLabel>
                       <Tooltip
                         label="The price in wei spent for each gas unit."
                         shouldWrapChildren
                       >
                         <FiInfo />
                       </Tooltip>
-                    </Flex>
+                    </div>
                     <Text>{Number(transaction.gasPrice).toLocaleString()}</Text>
                   </FormControl>
                 )}

diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -377,7 +377,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
           </Button>
         </Flex>
       )}
-      <Flex direction="column">
+      <div className="flex flex-col">
         <Divider flexShrink={0} />
         <Flex
           direction={{ base: "column-reverse", md: "row" }}
@@ -532,7 +532,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
             )}
           </ButtonGroup>
         </Flex>
-      </Flex>
+      </div>
     </Flex>
   );
 };

diff --git a/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx b/apps/dashboard/src/components/onboarding/ApplyForOpCreditsForm.tsx
@@ -233,7 +233,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
           <FormHelperText>Minimum 150 characters recommended.</FormHelperText>
         </FormControl>
       </Flex>
-      <Flex>
+      <div className="flex flex-row">
         <Button
           w="full"
           type="submit"
@@ -242,7 +242,7 @@ export const ApplyForOpCreditsForm: React.FC<ApplyForOpCreditsFormProps> = ({
         >
           {form.formState.isSubmitting ? "Applying..." : "Apply now"}
         </Button>
-      </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
@@ -127,15 +127,15 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
                 variant="left-accent"
                 bg="inputBg"
               >
-                <Flex>
+                <div className="flex flex-row">
                   <AlertIcon boxSize={4} mt={1} ml={1} />
                   <Flex flexDir="column" gap={1} pl={1}>
                     <AlertDescription as={Text} fontSize="body.md">
                       A temporary hold will be placed and immediately released
                       on your payment method.
                     </AlertDescription>
                   </Flex>
-                </Flex>
+                </div>
               </Alert>
             )}
 

diff --git a/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx b/apps/dashboard/src/components/product-pages/common/ProductLearnMoreCard.tsx
@@ -27,7 +27,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
 }) => {
   return (
     <Flex direction="column" justify="space-between" align="flex-start" gap={4}>
-      <Flex direction="column">
+      <div className="flex flex-col">
         <Flex alignItems="center" gap={2}>
           <ChakraNextImage src={icon} placeholder="empty" alt="" w={8} />
           <Heading size="title.sm" as="h3">
@@ -37,7 +37,7 @@ export const ProductLearnMoreCard: React.FC<ProductLearnMoreCardProps> = ({
         <Text size="body.lg" mt="16px">
           {description}
         </Text>
-      </Flex>
+      </div>
       <TrackedLink
         width="auto"
         href={href}

diff --git a/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/HoverMenu.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Fade,
-  Flex,
-  SimpleGrid,
-  Stack,
-  useDisclosure,
-} from "@chakra-ui/react";
+import { Box, Fade, SimpleGrid, Stack, useDisclosure } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { Card, Text } from "tw-components";
 import { NavCard } from "./NavCard";
@@ -83,15 +76,15 @@ export const HoverMenu: React.FC<HoverMenuProps> = ({
             borderRadius="8px"
             width={width}
           >
-            <Flex>
+            <div className="flex flex-row">
               <Stack>
                 <SimpleGrid columns={columns} gap={2}>
                   {items.map((item) => (
                     <NavCard key={item.label} {...item} />
                   ))}
                 </SimpleGrid>
               </Stack>
-            </Flex>
+            </div>
           </Card>
         </Fade>
       </Box>

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, Flex, Icon, Stack } from "@chakra-ui/react";
+import { Box, Icon, Stack } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Text, TrackedLink } from "tw-components";
 import type { SectionItemProps, SectionProps } from "./types";
@@ -34,15 +34,15 @@ export const NavCard: React.FC<SectionItemProps | SectionProps> = ({
               mr={2}
             />
           )}
-          <Flex direction="column">
+          <div className="flex flex-col">
             <Text
               fontWeight="bold"
               color={comingSoon ? "whiteAlpha.400" : "white"}
             >
               {name} {comingSoon && "(coming soon)"}
             </Text>
             <Text color="whiteAlpha.500">{description}</Text>
-          </Flex>
+          </div>
         </Stack>
       </Box>
     </TrackedLink>

diff --git a/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx b/apps/dashboard/src/components/product-pages/common/nav/NestedHoverMenu.tsx
@@ -119,7 +119,7 @@ export const NestedHoverMenu: React.FC<NestedHoverMenuProps> = ({
             borderRadius="8px"
             width={WIDTH}
           >
-            <Flex>
+            <div className="flex flex-row">
               <Flex
                 flexDir="column"
                 borderRight="1px"
@@ -152,7 +152,7 @@ export const NestedHoverMenu: React.FC<NestedHoverMenuProps> = ({
                   </SimpleGrid>
                 </Stack>
               </Flex>
-            </Flex>
+            </div>
           </Card>
         </Fade>
       </Box>

diff --git a/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx b/apps/dashboard/src/components/product-pages/common/nav/ProductNavCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Stack } from "@chakra-ui/react";
+import { Box, Stack } from "@chakra-ui/react";
 import type { IconType } from "@react-icons/all-files";
 import type { StaticImageData } from "next/image";
 import { Text } from "tw-components";
@@ -27,15 +27,15 @@ export const ProductNavCard: React.FC<ProductSectionItemProps> = ({
       cursor="default"
     >
       <Stack direction="row" align="center" spacing={3}>
-        <Flex direction="column">
+        <div className="flex flex-col">
           <Text
             fontWeight="bold"
             color={comingSoon ? "whiteAlpha.400" : "white"}
           >
             {name} {comingSoon && "(coming soon)"}
           </Text>
           <Text color="whiteAlpha.500">{description}</Text>
-        </Flex>
+        </div>
       </Stack>
     </Box>
   );

diff --git a/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx b/apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx
@@ -346,7 +346,7 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
         />
       </OnboardingModal>
 
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -357,7 +357,7 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
           <AlertDescription mb={2} as={Flex} direction="column">
             <Text mb={showCTAs ? "4" : "0"}>{description}</Text>
             {showCTAs && (
-              <Flex>
+              <div className="flex flex-row">
                 {isBilling && account ? (
                   <ManageBillingButton
                     account={account}
@@ -390,11 +390,11 @@ const BillingAlertNotification: React.FC<BillingAlertNotificationProps> = ({
                 >
                   Contact Support
                 </TrackedLinkButton>
-              </Flex>
+              </div>
             )}
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {onDismiss && (
         <IconButton

diff --git a/...hboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx b/...hboard/src/components/settings/Account/Billing/alerts/PaymentVerificationFailureAlert.tsx
@@ -29,7 +29,7 @@ export const PaymentVerificationFailureAlert: React.FC<
       variant="left-accent"
       bg="inputBg"
     >
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -57,7 +57,7 @@ export const PaymentVerificationFailureAlert: React.FC<
             </Flex>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
     </Alert>
   );
 };
diff --git a/...dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx b/...dashboard/src/components/settings/Account/Billing/alerts/RecurringPaymentFailureAlert.tsx
@@ -77,7 +77,7 @@ export const RecurringPaymentFailureAlert: React.FC<
         />
       </OnboardingModal>
 
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" pl={1}>
           <AlertTitle>
@@ -95,7 +95,7 @@ export const RecurringPaymentFailureAlert: React.FC<
                   : "We will retry several times over the next 10 days after your invoice date, after which you will lose access to your services."}
               </Text>
               {affectedServices.length > 0 && (
-                <Flex direction="column">
+                <div className="flex flex-col">
                   <Text>Affected services:</Text>
                   <UnorderedList mb={4}>
                     {affectedServices.map((service) => (
@@ -104,9 +104,9 @@ export const RecurringPaymentFailureAlert: React.FC<
                       </li>
                     ))}
                   </UnorderedList>
-                </Flex>
+                </div>
               )}
-              <Flex>
+              <div className="flex flex-row">
                 {account && (
                   <ManageBillingButton
                     account={account}
@@ -135,11 +135,11 @@ export const RecurringPaymentFailureAlert: React.FC<
                 >
                   Contact Support
                 </TrackedLinkButton>
-              </Flex>
+              </div>
             </Flex>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {onDismiss && (
         <IconButton

diff --git a/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx b/apps/dashboard/src/components/settings/ApiKeys/Alerts.tsx
@@ -36,7 +36,7 @@ export const SmartWalletsBillingAlert = ({
       variant="left-accent"
       bg="backgroundCardHighlight"
     >
-      <Flex>
+      <div className="flex flex-row">
         <AlertIcon boxSize={4} mt={1} ml={1} />
         <Flex flexDir="column" gap={1} pl={1}>
           <AlertTitle>Account Abstraction on Mainnet</AlertTitle>
@@ -60,7 +60,7 @@ export const SmartWalletsBillingAlert = ({
             </TrackedLink>
           </AlertDescription>
         </Flex>
-      </Flex>
+      </div>
 
       {dismissable && (
         <IconButton