58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
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;
|