Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
kien-ngo committed Sep 24, 2024
1 parent 4da40f1 commit a3e71c4
Show file tree
Hide file tree
Showing 38 changed files with 153 additions and 262 deletions.
1 change: 1 addition & 0 deletions apps/dashboard/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ module.exports = {
"VStack",
"HStack",
"AspectRatio",
"Center",
// also the types
"ButtonProps",
"BadgeProps",
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -128,7 +128,7 @@ export const ContentContainer: React.FC<SlideStateProps> = ({
)}
</ButtonGroup>
</Flex>
</Center>
</div>
</Flex>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
10 changes: 5 additions & 5 deletions apps/dashboard/src/components/FTUX/components/Graphics.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
);
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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 />
Expand All @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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={{
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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)"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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)"
Expand All @@ -187,7 +187,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
filter="blur(8px)"
/>
{content}
</Center>
</div>
);
}

Expand Down
41 changes: 10 additions & 31 deletions apps/dashboard/src/components/ipfs-upload/dropzone.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useDashboardStorageUpload } from "@3rdweb-sdk/react/hooks/useDashboardS
import {
Box,
ButtonGroup,
Center,
Divider,
Flex,
GridItem,
Expand Down Expand Up @@ -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()} />

Expand Down Expand Up @@ -147,7 +133,7 @@ export const IpfsUploadDropzone: React.FC = () => {
)}
</Flex>
}
</Center>
</div>
)}
</div>
<Flex flexDir="column" gap={{ base: 6, md: 3 }} />
Expand Down Expand Up @@ -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"
Expand All @@ -473,7 +452,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
>
{Math.round(progressPercent)}%
</Text> */}
</Center>
</div>
</Flex>
)}
<ButtonGroup ml={{ base: "0", md: "auto" }}>
Expand Down
5 changes: 2 additions & 3 deletions apps/dashboard/src/components/onboarding/PaymentForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
Alert,
AlertDescription,
AlertIcon,
Center,
Flex,
Spinner,
} from "@chakra-ui/react";
Expand Down Expand Up @@ -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 ? (
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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"
Expand All @@ -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}>
Expand Down
19 changes: 4 additions & 15 deletions apps/dashboard/src/components/product-pages/common/Hero.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
Center,
Container,
Flex,
GridItem,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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" }}
Expand All @@ -186,7 +175,7 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
(max-width: 1200px) 50vw,
33vw"
/>
</Center>
</div>
)}
</SimpleGrid>

Expand All @@ -197,6 +186,6 @@ export const Hero: ComponentWithChildren<HeroProps> = ({
>
{children}
</Container>
</Center>
</section>
);
};
Loading

0 comments on commit a3e71c4

Please sign in to comment.