Update

thirdweb-dev · Sep 24, 2024 · a3e71c4 · a3e71c4
1 parent 4da40f1
commit a3e71c4
Show file tree

Hide file tree

Showing 38 changed files with 153 additions and 262 deletions.
diff --git a/apps/dashboard/.eslintrc.js b/apps/dashboard/.eslintrc.js
@@ -58,6 +58,7 @@ module.exports = {
               "VStack",
               "HStack",
               "AspectRatio",
+              "Center",
               // also the types
               "ButtonProps",
               "BadgeProps",

diff --git a/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx b/apps/dashboard/src/components/FTUX/components/ContentContainer.tsx
@@ -1,5 +1,5 @@
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { Box, ButtonGroup, Center, Flex } from "@chakra-ui/react";
+import { Box, ButtonGroup, Flex } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useTrack } from "hooks/analytics/useTrack";
 import { FiArrowRight } from "react-icons/fi";
@@ -98,7 +98,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
       h="100%"
       justify="space-between"
     >
-      <Center flexGrow={1} position="relative">
+      <div className="relative flex grow items-center justify-center">
         <Flex gap={8} direction="column" height="100%" width="100%">
           <Box position="relative" w="full" mt="auto">
             <SlideContent
@@ -128,7 +128,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
             )}
           </ButtonGroup>
         </Flex>
-      </Center>
+      </div>
     </Flex>
   );
 };
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="w-full relative aspect-[16/9] md:aspect-square">
+      {/* @to be completed */}
       <Center
         as={motion.div}
         initial={`slide-${slideIndex}`}

diff --git a/apps/dashboard/src/components/FTUX/components/Graphics.tsx b/apps/dashboard/src/components/FTUX/components/Graphics.tsx
@@ -1,4 +1,4 @@
-import { Center, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { motion } from "framer-motion";
 import { Heading } from "tw-components";
@@ -48,25 +48,25 @@ export const Titles: React.FC<SlideStateProps> = ({
 
 export const DashboardImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center>
+    <div className="flex items-center justify-center">
       <ChakraNextImage
         priority
         w={{ base: "45%", md: "90%" }}
         src={require("../../../../public/assets/product-pages/dashboard/hero.png")}
         alt=""
       />
-    </Center>
+    </div>
   </motion.div>
 );
 
 export const ConnectWalletImage: React.FC = () => (
   <motion.div {...moveDown}>
-    <Center h="100%" w="100%">
+    <div className="flex items-center justify-center h-full w-full">
       <ChakraNextImage
         alt=""
         boxSize="75px"
         src={require("../../../../public/logos/wallet.png")}
       />
-    </Center>
+    </div>
   </motion.div>
 );
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -119,6 +119,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
                 : `This action will trigger ${transactionCount} ${transactionCount > 1 ? "transactions" : "transaction"}`
             }
           >
+            {/* to be completed */}
             <Center
               _groupHover={{
                 bg:

diff --git a/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx b/apps/dashboard/src/components/contract-components/tables/published-contracts.tsx
@@ -1,11 +1,4 @@
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  Center,
-  Flex,
-  Spinner,
-} from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Flex, Spinner } from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useMemo, useState } from "react";
 import { IoRefreshSharp } from "react-icons/io5";
@@ -90,15 +83,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
         hidePublisher
       >
         {publishedContractsQuery.isPending && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex py={4} direction="row" gap={4} align="center">
               <Spinner size="sm" />
               <Text>Loading published contracts</Text>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isError && (
-          <Center>
+          <div className="flex items-center justify-center">
             <Flex mt={4} py={4} direction="column" gap={4} align="center">
               <Alert status="error" borderRadius="md">
                 <AlertIcon />
@@ -116,15 +109,15 @@ export const PublishedContracts: React.FC<PublishedContractsProps> = ({
                 </Button>
               </Alert>
             </Flex>
-          </Center>
+          </div>
         )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length === 0 && (
-            <Center>
+            <div className="flex items-center justify-center">
               <Flex py={4} direction="column" gap={4} align="center">
                 <Text>No published contracts found.</Text>
               </Flex>
-            </Center>
+            </div>
           )}
         {publishedContractsQuery.isSuccess &&
           publishedContractsQuery.data.length > slicedData.length && (

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
@@ -1,7 +1,7 @@
 "use client";
 
 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { Center, Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { ChainIcon } from "components/icons/ChainIcon";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -119,13 +119,9 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                 cursor="pointer"
               >
                 {chain.icon?.url && (
-                  <Center
-                    boxSize={5}
-                    mr={{ base: 0, md: -0.5 }}
-                    borderRadius="full"
-                  >
+                  <div className="flex items-center justify-center w-5 h-5 mr-0 md:-mr-0.5 rounded-full">
                     <ChainIcon ipfsSrc={chain.icon.url} size={24} />
-                  </Center>
+                  </div>
                 )}
                 <Heading
                   display={{

diff --git a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex, LightMode } from "@chakra-ui/react";
+import { Box, Flex, LightMode } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
 import { GeneralCta } from "components/shared/GeneralCta";
@@ -18,8 +18,8 @@ export const GetStartedSection = () => {
         align="center"
         gap={{ base: 6, md: 8 }}
       >
-        <Center mb={6} pt={{ base: 8, lg: 24 }}>
-          <Center p={2} position="relative" mb={6}>
+        <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">
             <Box
               position="absolute"
               bgGradient="linear(to-r, #F213A4, #040BBF)"
@@ -38,8 +38,8 @@ export const GetStartedSection = () => {
               placeholder="empty"
               src={WhiteLogo}
             />
-          </Center>
-        </Center>
+          </div>
+        </div>
         <Heading as="h2" size="display.md" textAlign="center">
           Get started with thirdweb
         </Heading>

diff --git a/apps/dashboard/src/components/homepage/sections/PricingCard.tsx b/apps/dashboard/src/components/homepage/sections/PricingCard.tsx
@@ -1,5 +1,5 @@
 import { AccountPlan } from "@3rdweb-sdk/react/hooks/useApi";
-import { Box, type CardProps, Center, Flex } from "@chakra-ui/react";
+import { Box, type CardProps, Flex } from "@chakra-ui/react";
 import {
   Badge,
   Card,
@@ -174,7 +174,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
   if (highlighted) {
     return (
-      <Center position="relative" p={2} m={-2}>
+      <div className="flex items-center justify-center relative p-2 -m-2">
         <Box
           position="absolute"
           bgGradient="linear(to-b, #4DABEE, #692AC1)"
@@ -187,7 +187,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
           filter="blur(8px)"
         />
         {content}
-      </Center>
+      </div>
     );
   }
 

diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -7,7 +7,6 @@ import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardS
 import {
   Box,
   ButtonGroup,
-  Center,
   Divider,
   Flex,
   GridItem,
@@ -87,35 +86,22 @@ export const IpfsUploadDropzone: React.FC = () => {
             <FileUpload files={droppedFiles} updateFiles={setDroppedFiles} />
           </Box>
         ) : !address ? (
-          <Center
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-          >
+          <div className="flex items-center justify-center border-border border-2 rounded-xl">
             <Text
               size="label.lg"
               className="text-muted-foreground"
               textAlign="center"
             >
               Please connect your wallet to begin uploading.
             </Text>
-          </Center>
+          </div>
         ) : (
-          <Center
+          <div
+            className={cn(
+              "flex items-center justify-center bg-transparent border-border border-2 border-solid rounded-xl hover:border-blue-600 dark:border-blue-400",
+              address ? "cursor-pointer" : "cursor-default",
+            )}
             {...getRootProps()}
-            bg="transparent"
-            _hover={{
-              _light: {
-                borderColor: "blue.600",
-              },
-              _dark: {
-                borderColor: "blue.400",
-              },
-            }}
-            border="2px solid"
-            borderColor="borderColor"
-            borderRadius="xl"
-            cursor={address ? "pointer" : "default"}
           >
             <input {...getInputProps()} />
 
@@ -147,7 +133,7 @@ export const IpfsUploadDropzone: React.FC = () => {
                 )}
               </Flex>
             }
-          </Center>
+          </div>
         )}
       </div>
       <Flex flexDir="column" gap={{ base: 6, md: 3 }} />
@@ -439,14 +425,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 isIndeterminate={storageUpload.isPending}
                 position="relative"
               />
-              <Center
-                display={{ base: "none", md: "block" }}
-                position="absolute"
-                left={0}
-                right={0}
-                top={0}
-                bottom={0}
-              >
+              <div className="left-0 bottom-0 right-0 top-0 absolute hidden md:block">
                 {/* <Text
                   mt={0.5}
                   size="label.xs"
@@ -473,7 +452,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 >
                   {Math.round(progressPercent)}%
                 </Text> */}
-              </Center>
+              </div>
             </Flex>
           )}
           <ButtonGroup ml={{ base: "0", md: "auto" }}>

diff --git a/apps/dashboard/src/components/onboarding/PaymentForm.tsx b/apps/dashboard/src/components/onboarding/PaymentForm.tsx
@@ -3,7 +3,6 @@ import {
   Alert,
   AlertDescription,
   AlertIcon,
-  Center,
   Flex,
   Spinner,
 } from "@chakra-ui/react";
@@ -109,9 +108,9 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
         />
 
         {loading ? (
-          <Center pb={16}>
+          <div className="flex items-center justify-center pb-16">
             <Spinner size="sm" />
-          </Center>
+          </div>
         ) : (
           <Flex flexDir="column" gap={4}>
             {paymentFailureCode ? (

diff --git a/apps/dashboard/src/components/product-pages/common/GameCard.tsx b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex, useBreakpointValue } from "@chakra-ui/react";
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { useTrack } from "hooks/analytics/useTrack";
 import NextImage, { type StaticImageData } from "next/image";
@@ -70,7 +70,7 @@ export const GameCard: React.FC<GameCardProps> = ({
               (max-width: 1200px) 50vw,
               33vw"
         />
-        <Center position="absolute" top={0} bottom={0} left={0} right={0}>
+        <div className="flex items-center justify-center absolute top-0 bottom-0 left-0 right-0">
           <Button
             leftIcon={<IoGameControllerOutline />}
             color="white"
@@ -80,7 +80,7 @@ export const GameCard: React.FC<GameCardProps> = ({
           >
             Play Game
           </Button>
-        </Center>
+        </div>
       </Box>
 
       <Flex direction="column" gap={2} pb={4} px={4}>

diff --git a/apps/dashboard/src/components/product-pages/common/Hero.tsx b/apps/dashboard/src/components/product-pages/common/Hero.tsx
@@ -1,5 +1,4 @@
 import {
-  Center,
   Container,
   Flex,
   GridItem,
@@ -49,13 +48,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
   imageHeight,
 }) => {
   return (
-    <Center
-      w="100%"
-      as="section"
-      flexDirection="column"
-      bg="#030A19"
-      padding={{ base: 0, md: "64px" }}
-    >
+    <section className="flex items-center justify-center flex-col w-full p-0 md:p-[64px] bg-[#030A19]">
       <SimpleGrid
         as={Container}
         maxW="container.page"
@@ -170,11 +163,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
           </SimpleGrid>
         </Flex>
         {image && (
-          <Center
-            display={{ base: "none", md: "flex" }}
-            padding={{ base: "24px", md: "48px" }}
-            gridColumnEnd={{ base: undefined, md: "span 3" }}
-          >
+          <div className="hidden md:flex items-center justify-center p-6 md:p-12 md:col-span-3">
             <ChakraNextImage
               maxH={{ base: imageHeight ? imageHeight : "480px" }}
               style={{ objectFit: "contain" }}
@@ -186,7 +175,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
                   (max-width: 1200px) 50vw,
                   33vw"
             />
-          </Center>
+          </div>
         )}
       </SimpleGrid>
 
@@ -197,6 +186,6 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
       >
         {children}
       </Container>
-    </Center>
+    </section>
   );
 };