wallet-connect-web-examples/dapps/react-dapp-auth/pages/_app.tsx
Celine Sarafa b45f4369c0
Use standalone modal (#79)
* Use standalone modal

* Set project id

* chore(deps): update deps

* chore(w3m-standalone): use web3modal standalone with auth-client

* fix(deps): update web3modal to v2.2.2

* fix(typescript): revert to 4.9.5

* chore(remove-deps): remove unused dependencies and global declaration

---------

Co-authored-by: Cali93 <armut.cumaali@gmail.com>
2023-03-28 09:58:18 +03:00

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;