74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import "../styles/globals.css";
|
|
import type { AppProps } from "next/app";
|
|
import { version } from "@walletconnect/auth-client/package.json";
|
|
import {
|
|
ChakraProvider,
|
|
Box,
|
|
Flex,
|
|
Grid,
|
|
GridItem,
|
|
Image,
|
|
} from "@chakra-ui/react";
|
|
import ThemeSwitcher from "../components/ThemeSwitcher";
|
|
|
|
function MyApp({ Component, pageProps }: AppProps) {
|
|
return (
|
|
<ChakraProvider>
|
|
<Box
|
|
width="100vw"
|
|
style={{ width: "100vw", height: "100vh" }}
|
|
className="bg-primary"
|
|
>
|
|
<Grid
|
|
templateAreas={`
|
|
"header"
|
|
"main"
|
|
"footer"
|
|
`}
|
|
style={{ height: "100%", width: "100%" }}
|
|
gridTemplateRows={"50px 3f 20px"}
|
|
gridTemplateColumns={"1fr"}
|
|
paddingY="2em"
|
|
>
|
|
<GridItem area={"header"}>
|
|
<Flex
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap="5"
|
|
fontSize={"1.25em"}
|
|
>
|
|
<div>Example App</div>
|
|
<Flex
|
|
padding="0.5em"
|
|
borderRadius="16px"
|
|
className="bg-secondary"
|
|
gap="2"
|
|
>
|
|
<Image
|
|
width="1.5em"
|
|
height="1.5em"
|
|
src="/wc-bg.png"
|
|
alt="WC"
|
|
></Image>
|
|
<span>V{version}</span>
|
|
</Flex>
|
|
</Flex>
|
|
</GridItem>
|
|
<Flex justifyContent="center">
|
|
<GridItem area={"main"} justifyContent="center">
|
|
<Component {...pageProps} />
|
|
</GridItem>
|
|
</Flex>
|
|
<GridItem area={"footer"} alignSelf="flex-end">
|
|
<Flex justifyContent="flex-end">
|
|
<ThemeSwitcher />
|
|
</Flex>
|
|
</GridItem>
|
|
</Grid>
|
|
</Box>
|
|
</ChakraProvider>
|
|
);
|
|
}
|
|
|
|
export default MyApp;
|