wallet-connect-web-examples/advanced/dapps/react-dapp-auth/views/DefaultView.tsx

import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";

const DefaultView: React.FC<{
  onClick: () => void;
  hasInitialized: boolean;
}> = ({ onClick, hasInitialized }) => {
  return (
    <Box>
      <Box position={{ position: "relative" }}>
        <Flex
          style={{ position: "relative", top: "1.5em" }}
          justifyContent="center"
        >
          <Flex
            style={{ position: "absolute", top: "5%" }}
            justifyContent="center"
          >
            <Image
              style={{ filter: "blur(10px)" }}
              src="/auth.png"
              alt="auth"
            />
          </Flex>
          <Image style={{ filter: "blur(1px)" }} src="/auth.png" alt="auth" />
        </Flex>
      </Box>
      <Flex
        flexDir={"column"}
        gap="5"
        padding="2em 3em"
        borderRadius={"24px"}
        className="bg-secondary"
        alignItems={"center"}
      >
        <Heading>Sign in</Heading>
        <Button
          minW="80%"
          paddingY="1.25em"
          fontSize={"1.25em"}
          onClick={onClick}
          borderRadius={"16px"}
          background="#3396FF"
          disabled={!hasInitialized}
        >
          <Flex gap="1em">
            <Image src="/wc.png" fit="scale-down" alt="WC" />
            <span style={{ color: "white" }}>
              {hasInitialized ? "WalletConnect" : "Initializing..."}
            </span>
          </Flex>
        </Button>
      </Flex>
    </Box>
  );
};

export default DefaultView;