Reskin the dapp to match the new design (#55)

* Reskin the dapp to match the new design

* Update theme for button

* Update auth package

* Add transition for smoother darklight mode

* Update styling to be more responsive

* Match to design

* Remove empty whitespace

dapps/react-dapp-auth/pages/_app.tsx

@@ -1,28 +1,72 @@
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
-import { ChakraProvider, Container, Flex, Image, Text } from "@chakra-ui/react";
+import { version } from "@walletconnect/auth-client/package.json";
+import {
+  ChakraProvider,
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+import ThemeSwitcher from "../components/ThemeSwitcher";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider>
-      <Container height="100vh" width="100vw">
-        <Flex py={5} gap={20} height={"100%"} direction="column">
-          <Flex
-            alignItems="center"
-            alignContent="center"
-            justifyContent="space-between"
-            p={5}
-            backgroundColor={"rgba(39,42,42,.95)"}
-            borderRadius={"16px"}
-          >
-            <Image width={10} src="/walletconnect.png" />
-            <Flex gap={5}>
-              <Text fontWeight={900}>Request Authentication</Text>
+      <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>
-          <Component {...pageProps} />
-        </Flex>
-      </Container>
+          <GridItem area={"footer"} alignSelf="flex-end">
+            <Flex justifyContent="flex-end">
+              <ThemeSwitcher />
+            </Flex>
+          </GridItem>
+        </Grid>
+      </Box>
     </ChakraProvider>
   );
 }

dapps/react-dapp-auth/pages/index.tsx

@@ -1,29 +1,18 @@
-import {
-  Button,
-  Container,
-  Text,
-  Divider,
-  Flex,
-  Heading,
-  Image,
-  SimpleGrid,
-  useToast,
-} from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import AuthClient from "@walletconnect/auth-client";
 import { version } from "@walletconnect/auth-client/package.json";
 import type { NextPage } from "next";
-import Link from "next/link";
-import Qrcode from "qrcode";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import DefaultView from "../views/DefaultView";
+import QrView from "../views/QrView";
+import SignedInView from "../views/SignedInView";
 
 console.log(`AuthClient@${version}`);
 
 const Home: NextPage = () => {
   const [client, setClient] = useState<AuthClient | null>();
   const [uri, setUri] = useState<string>("");
-  const [accepted, setAccepted] = useState<boolean>(false);
-  const toast = useToast();
-  const canvasRef = useRef(null);
+  const [address, setAddress] = useState<string>("");
 
   const onSignIn = useCallback(() => {
     if (!client) return;
@@ -60,82 +49,28 @@ const Home: NextPage = () => {
   useEffect(() => {
     if (!client) return;
     client.on("auth_response", (res) => {
-      if (!!res.params.result.s) {
-        setAccepted(true);
+      if (res.params.result.s) {
+        setAddress(res.params.result.p.iss.split(":")[4]);
       }
     });
   }, [client]);
 
+  const [view, changeView] = useState<"default" | "qr" | "signedIn">("default");
+
   useEffect(() => {
-    if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
-  }, [uri, canvasRef]);
+    if (uri) changeView("qr");
+  }, [uri, changeView]);
+
+  useEffect(() => {
+    if (address) changeView("signedIn");
+  }, [address, changeView]);
+
   return (
-    <Container>
-      <Flex gap={20} height={"100%"} direction="column">
-        <Flex
-          boxShadow={"inner"}
-          p={5}
-          backgroundColor={"gray.50"}
-          direction="column"
-          justifyContent="space-evenly"
-          borderRadius={10}
-          border={"solid 2px black"}
-        >
-          <Heading color={"black"} textAlign="center" mb={5}>
-            Sign In
-          </Heading>
-          <Divider mb={5}></Divider>
-          <Text color={"black"} textAlign="center" padding={5}>
-            Initiate the auth cycle by sending an auth request
-          </Text>
-          <form>
-            <Container></Container>
-            <Flex alignItems={"center"} gap={4} direction="column">
-              <Button
-                p={2}
-                color={"black"}
-                onClick={onSignIn}
-                leftIcon={<Image width={10} src="/walletconnect.png" />}
-              >
-                Sign in with WalletConnect
-              </Button>
-              {uri && (
-                <Fragment>
-                  <canvas
-                    onClick={() => {
-                      navigator.clipboard.writeText(uri).then(() => {
-                        toast({
-                          title: "URI copied to clipboard",
-                          status: "success",
-                          duration: 1000,
-                        });
-                      });
-                    }}
-                    ref={canvasRef}
-                  />
-                  <Text
-                    color="gray.400"
-                    style={{ fontStyle: "italic", fontSize: "0.75em" }}
-                  >
-                    (You can copy the URI by clicking the QR code above)
-                  </Text>
-                </Fragment>
-              )}
-            </Flex>
-          </form>
-          {accepted && (
-            <Button
-              _hover={{ cursor: "pointer" }}
-              p={10}
-              colorScheme="green"
-              isActive={false}
-            >
-              Authenticated
-            </Button>
-          )}
-        </Flex>
-      </Flex>
-    </Container>
+    <Box width="100%" height="100%">
+      {view === "default" && <DefaultView onClick={onSignIn} />}
+      {view === "qr" && <QrView uri={uri} />}
+      {view === "signedIn" && <SignedInView address={address} />}
+    </Box>
   );
 };