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/components/ThemeSwitcher.tsx

@@ -0,0 +1,64 @@
+import { Flex, Switch } from "@chakra-ui/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import moon from "../public/moon.svg";
+import sun from "../public/sun.svg";
+
+const ThemeSwitcher: React.FC = () => {
+  const [darkMode, setDarkMode] = useState(true);
+  const switchRef = useRef(null);
+
+  const darkTheme = useMemo(
+    () => ({
+      "--primary-bg": "#1e1e1e",
+      "--secondary-bg": "#272a2a",
+      "--qr-bg": "#141414",
+      "--text-color": "white",
+      "--wc-btn-bg": "#19324d",
+      "--wc-btn-brdr": "#0f4b8a",
+      "--wc-btn-clr": "#66b1ff",
+    }),
+    []
+  );
+
+  const lightTheme = useMemo(
+    () => ({
+      "--primary-bg": "#F1F3F3",
+      "--secondary-bg": "white",
+      "--qr-bg": "#c8d0d0",
+      "--text-color": "black",
+      "--wc-btn-bg": "#E8F2FC",
+      "--wc-btn-brdr": "#CDE5FE",
+      "--wc-btn-clr": "#3396FF",
+    }),
+    []
+  );
+
+  const setTheme = useCallback((theme: Record<string, string>) => {
+    Object.entries(theme).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (darkMode) {
+      setTheme(darkTheme);
+    } else {
+      setTheme(lightTheme);
+    }
+  }, [darkMode, setTheme, darkTheme, lightTheme]);
+
+  return (
+    <Switch
+      size="lg"
+      ref={switchRef}
+      isChecked={darkMode}
+      colorScheme="blackAlpha"
+      className={`theme-switcher theme-switcher-${darkMode ? "dark" : "light"}`}
+      onChange={({ target }) => {
+        setDarkMode(target.checked);
+      }}
+    />
+  );
+};
+
+export default ThemeSwitcher;

dapps/react-dapp-auth/package-lock.json

@@ -13,19 +13,22 @@
         "@emotion/styled": "^11.10.0",
         "@walletconnect/auth-client": "^0.1.10",
         "better-sqlite3": "^7.6.2",
+        "ethers": "^5.7.0",
         "events": "^3.3.0",
         "framer-motion": "^7.0.0",
         "next": "12.2.4",
         "qr-scanner": "^1.4.1",
         "qrcode": "^1.5.1",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "smart-truncate": "^1.0.1"
       },
       "devDependencies": {
         "@types/node": "18.6.4",
         "@types/qrcode": "^1.4.3",
         "@types/react": "18.0.15",
         "@types/react-dom": "18.0.6",
+        "@types/smart-truncate": "^1.0.2",
         "eslint": "8.21.0",
         "eslint-config-next": "12.2.4",
         "typescript": "4.7.4"
@@ -2909,6 +2912,12 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/smart-truncate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/smart-truncate/-/smart-truncate-1.0.2.tgz",
+      "integrity": "sha512-Zs6sRRlnal8ADE2E6LHcTujCfrGw0htB7iUnrvKEem+8QS6B8spFRvkdIdyY3C8KhnyJkGVR6zmcwWS9FNxfOw==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.35.1",
       "dev": true,
@@ -6431,6 +6440,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/smart-truncate": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/smart-truncate/-/smart-truncate-1.0.1.tgz",
+      "integrity": "sha512-f+kSLMDWKSCpYhwOZM+Da4d8klk5nY4gH57HOEOaaotsZEsTIm/51/9vKDNE26WjU72eBM1zEYdQl6uDwvZfLg=="
+    },
     "node_modules/sonic-boom": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-1.4.1.tgz",
@@ -8919,6 +8933,12 @@
       "version": "0.16.2",
       "devOptional": true
     },
+    "@types/smart-truncate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/smart-truncate/-/smart-truncate-1.0.2.tgz",
+      "integrity": "sha512-Zs6sRRlnal8ADE2E6LHcTujCfrGw0htB7iUnrvKEem+8QS6B8spFRvkdIdyY3C8KhnyJkGVR6zmcwWS9FNxfOw==",
+      "dev": true
+    },
     "@typescript-eslint/parser": {
       "version": "5.35.1",
       "dev": true,
@@ -11164,6 +11184,11 @@
       "version": "3.0.0",
       "dev": true
     },
+    "smart-truncate": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/smart-truncate/-/smart-truncate-1.0.1.tgz",
+      "integrity": "sha512-f+kSLMDWKSCpYhwOZM+Da4d8klk5nY4gH57HOEOaaotsZEsTIm/51/9vKDNE26WjU72eBM1zEYdQl6uDwvZfLg=="
+    },
     "sonic-boom": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-1.4.1.tgz",

dapps/react-dapp-auth/package.json

@@ -14,19 +14,22 @@
     "@emotion/styled": "^11.10.0",
     "@walletconnect/auth-client": "^0.1.10",
     "better-sqlite3": "^7.6.2",
+    "ethers": "^5.7.0",
     "events": "^3.3.0",
     "framer-motion": "^7.0.0",
     "next": "12.2.4",
     "qr-scanner": "^1.4.1",
     "qrcode": "^1.5.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "smart-truncate": "^1.0.1"
   },
   "devDependencies": {
     "@types/node": "18.6.4",
     "@types/qrcode": "^1.4.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
+    "@types/smart-truncate": "^1.0.2",
     "eslint": "8.21.0",
     "eslint-config-next": "12.2.4",
     "typescript": "4.7.4"

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">
+      <Box
-        <Flex py={5} gap={20} height={"100%"} direction="column">
+        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"
-            alignContent="center"
+              justifyContent="center"
-            justifyContent="space-between"
+              gap="5"
-            p={5}
+              fontSize={"1.25em"}
-            backgroundColor={"rgba(39,42,42,.95)"}
-            borderRadius={"16px"}
             >
-            <Image width={10} src="/walletconnect.png" />
+              <div>Example App</div>
-            <Flex gap={5}>
+              <Flex
-              <Text fontWeight={900}>Request Authentication</Text>
+                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>
-      </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 {
+import { Box } from "@chakra-ui/react";
-  Button,
-  Container,
-  Text,
-  Divider,
-  Flex,
-  Heading,
-  Image,
-  SimpleGrid,
-  useToast,
-} 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 { useCallback, useEffect, useState } from "react";
-import Qrcode from "qrcode";
+import DefaultView from "../views/DefaultView";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+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 [address, setAddress] = useState<string>("");
-  const toast = useToast();
-  const canvasRef = useRef(null);
 
   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) {
+      if (res.params.result.s) {
-        setAccepted(true);
+        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);
+    if (uri) changeView("qr");
-  }, [uri, canvasRef]);
+  }, [uri, changeView]);
+
+  useEffect(() => {
+    if (address) changeView("signedIn");
+  }, [address, changeView]);
+
   return (
-    <Container>
+    <Box width="100%" height="100%">
-      <Flex gap={20} height={"100%"} direction="column">
+      {view === "default" && <DefaultView onClick={onSignIn} />}
-        <Flex
+      {view === "qr" && <QrView uri={uri} />}
-          boxShadow={"inner"}
+      {view === "signedIn" && <SignedInView address={address} />}
-          p={5}
+    </Box>
-          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>
   );
 };
 

dapps/react-dapp-auth/public/copy.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00298 4.00529C4.01518 2.77994 4.07734 2.06898 4.39411 1.51362C4.6603 1.04694 5.04694 0.660299 5.51362 0.394105C6.20456 0 7.13638 0 9 0C10.8636 0 11.7954 0 12.4864 0.394105C12.9531 0.660299 13.3397 1.04694 13.6059 1.51362C14 2.20456 14 3.13638 14 5C14 6.86362 14 7.79544 13.6059 8.48638C13.3397 8.95306 12.9531 9.3397 12.4864 9.60589C11.931 9.92266 11.2201 9.98482 9.99473 9.99702L9.99697 10C9.98464 11.2221 9.92221 11.9318 9.60589 12.4864C9.3397 12.9531 8.95306 13.3397 8.48638 13.6059C7.79544 14 6.86362 14 5 14C3.13638 14 2.20456 14 1.51362 13.6059C1.04694 13.3397 0.660299 12.9531 0.394105 12.4864C0 11.7955 0 10.8636 0 9.00002C0 7.1364 0 6.20459 0.394105 5.51364C0.660299 5.04696 1.04694 4.66032 1.51362 4.39413C2.06818 4.07782 2.77789 4.01538 4 4.00305L4.00298 4.00529ZM9 8.5C8.04098 8.5 7.42048 8.49861 6.95033 8.45667C6.49953 8.41646 6.3366 8.34846 6.25681 8.30295C6.02347 8.16985 5.83015 7.97653 5.69705 7.74319C5.65154 7.6634 5.58354 7.50047 5.54333 7.04967C5.50139 6.57952 5.5 5.95902 5.5 5C5.5 4.04098 5.50139 3.42048 5.54333 2.95033C5.58354 2.49953 5.65154 2.3366 5.69705 2.25681C5.83015 2.02347 6.02347 1.83015 6.25681 1.69705C6.3366 1.65154 6.49953 1.58354 6.95033 1.54333C7.42048 1.50139 8.04098 1.5 9 1.5C9.95902 1.5 10.5795 1.50139 11.0497 1.54333C11.5005 1.58354 11.6634 1.65154 11.7432 1.69705C11.9765 1.83015 12.1699 2.02347 12.3029 2.25681C12.3485 2.3366 12.4165 2.49953 12.4567 2.95033C12.4986 3.42048 12.5 4.04098 12.5 5C12.5 5.95902 12.4986 6.57952 12.4567 7.04967C12.4165 7.50047 12.3485 7.6634 12.3029 7.74319C12.1699 7.97653 11.9765 8.16985 11.7432 8.30295C11.6634 8.34846 11.5005 8.41646 11.0497 8.45667C10.5795 8.49861 9.95902 8.5 9 8.5ZM4 5.50319C3.56883 5.50762 3.2325 5.51818 2.95033 5.54335C2.49953 5.58356 2.3366 5.65156 2.25681 5.69707C2.02347 5.83017 1.83015 6.02349 1.69705 6.25683C1.65154 6.33662 1.58354 6.49955 1.54333 6.95035C1.50139 7.4205 1.5 8.041 1.5 9.00002C1.5 9.95904 1.50139 10.5795 1.54333 11.0497C1.58354 11.5005 1.65154 11.6634 1.69705 11.7432C1.83015 11.9766 2.02347 12.1699 2.25681 12.303C2.3366 12.3485 2.49953 12.4165 2.95033 12.4567C3.42048 12.4986 4.04098 12.5 5 12.5C5.95902 12.5 6.57952 12.4986 7.04967 12.4567C7.50047 12.4165 7.6634 12.3485 7.74319 12.303C7.97653 12.1699 8.16985 11.9766 8.30295 11.7432C8.34846 11.6634 8.41646 11.5005 8.45667 11.0497C8.48184 10.7675 8.4924 10.4312 8.49683 10C6.96254 9.99683 6.13941 9.96284 5.51362 9.60589C5.04694 9.3397 4.6603 8.95306 4.39411 8.48638C4.03716 7.86059 4.00317 7.03747 4 5.50319Z" fill="#66B1FF"/>
+</svg>

dapps/react-dapp-auth/public/moon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4886 8.58186C15.5877 9.45941 14.357 9.99999 13 9.99999C10.2386 9.99999 8 7.76142 8 4.99999C8 3.64301 8.54058 2.41228 9.41813 1.51141C9.57056 1.35494 9.73311 1.20844 9.90478 1.07295C10.2898 0.769107 10.2101 0.0672333 9.72122 0.0284691C9.43254 0.00557958 9.1383 -0.00365545 8.84492 0.00130131C3.9459 0.0840722 0 4.08123 0 8.99999C0 13.9706 4.02944 18 9 18C13.9188 18 17.9159 14.0541 17.9987 9.15507C18.0036 8.86165 17.9944 8.56746 17.9715 8.27878C17.9328 7.78988 17.2309 7.71024 16.927 8.09521C16.7915 8.26688 16.6451 8.42945 16.4886 8.58186ZM15.2991 11.0814C15.7079 10.9267 16.1623 11.2747 16.0059 11.6828C14.9265 14.4999 12.1968 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 8.99999C1.5 5.80319 3.50007 3.07353 6.31715 1.99409C6.72532 1.83769 7.0733 2.2921 6.91862 2.70092C6.64821 3.41562 6.5 4.19056 6.5 4.99999C6.5 8.58984 9.41015 11.5 13 11.5C13.8094 11.5 14.5844 11.3518 15.2991 11.0814Z" fill="white"/>
+</svg>

dapps/react-dapp-auth/public/scan.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.2479 8.99997C23.6627 8.99997 23.9992 8.66248 23.9962 8.24768C23.9778 5.65192 23.8678 4.17733 23.2118 3.02721C22.6794 2.09384 21.9061 1.32056 20.9727 0.788174C19.8226 0.132152 18.348 0.0221324 15.7522 0.00368134C15.3374 0.000732908 14.9999 0.337238 14.9999 0.752048C14.9999 1.16571 15.3349 1.50083 15.7485 1.50378C16.763 1.51101 17.5672 1.53195 18.2418 1.59249C19.2368 1.68178 19.8031 1.84788 20.2295 2.09112C20.9296 2.49041 21.5095 3.07037 21.9088 3.7704C22.1521 4.19685 22.3181 4.76317 22.4074 5.75815C22.468 6.4327 22.4889 7.23688 22.4961 8.25134C22.4991 8.665 22.8342 8.99997 23.2479 8.99997Z" fill="#9EA9A9"/>
+<path d="M3.02721 0.788174C4.17732 0.132161 5.6519 0.0221355 8.24762 0.00368196C8.66242 0.000733053 8.99991 0.337238 8.99991 0.752048C8.99991 1.16571 8.66494 1.50083 8.25129 1.50378C7.23685 1.51101 6.43269 1.53195 5.75815 1.59249C4.76317 1.68178 4.19685 1.84788 3.7704 2.09112C3.07037 2.49041 2.49041 3.07037 2.09112 3.7704C1.84788 4.19685 1.68178 4.76317 1.59249 5.75815C1.53195 6.4327 1.51101 7.23688 1.50378 8.25134C1.50083 8.665 1.16571 8.99997 0.752048 8.99997C0.337238 8.99997 0.000732695 8.66247 0.00368134 8.24767C0.0221335 5.65192 0.132156 4.17733 0.788174 3.02721C1.32056 2.09384 2.09384 1.32056 3.02721 0.788174Z" fill="#9EA9A9"/>
+<path d="M0.752048 15C0.337238 15 0.000732716 15.3375 0.00368139 15.7523C0.0221337 18.348 0.132157 19.8226 0.788174 20.9727C1.32056 21.9061 2.09384 22.6794 3.02721 23.2118C4.17732 23.8678 5.6519 23.9778 8.24762 23.9962C8.66242 23.9992 8.99991 23.6627 8.99991 23.2479C8.99991 22.8342 8.66494 22.4991 8.25129 22.4961C7.23685 22.4889 6.43269 22.468 5.75815 22.4074C4.76317 22.3181 4.19685 22.1521 3.7704 21.9088C3.07037 21.5095 2.49041 20.9296 2.09112 20.2295C1.84788 19.8031 1.68178 19.2368 1.59249 18.2418C1.53195 17.5672 1.51101 16.7631 1.50378 15.7486C1.50083 15.3349 1.16571 15 0.752048 15Z" fill="#9EA9A9"/>
+<path d="M22.4961 15.7486C22.4991 15.3349 22.8342 15 23.2479 15C23.6627 15 23.9992 15.3375 23.9962 15.7523C23.9778 18.348 23.8678 19.8226 23.2118 20.9727C22.6794 21.9061 21.9061 22.6794 20.9727 23.2118C19.8226 23.8678 18.348 23.9778 15.7522 23.9962C15.3374 23.9992 14.9999 23.6627 14.9999 23.2479C14.9999 22.8342 15.3349 22.4991 15.7485 22.4962C16.763 22.4889 17.5672 22.468 18.2418 22.4074C19.2368 22.3181 19.8031 22.1521 20.2295 21.9088C20.9296 21.5095 21.5095 20.9296 21.9088 20.2295C22.1521 19.8031 22.3181 19.2368 22.4074 18.2418C22.468 17.5672 22.4889 16.7631 22.4961 15.7486Z" fill="#9EA9A9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.49994 3.99997C5.11922 3.99997 3.99994 5.11926 3.99994 6.49997V8.49997C3.99994 9.88068 5.11922 11 6.49994 11H8.49994C9.88065 11 10.9999 9.88068 10.9999 8.49997V6.49997C10.9999 5.11926 9.88065 3.99997 8.49994 3.99997H6.49994ZM8.49994 5.49997H6.49994C5.94765 5.49997 5.49994 5.94768 5.49994 6.49997V8.49997C5.49994 9.05225 5.94765 9.49997 6.49994 9.49997H8.49994C9.05222 9.49997 9.49994 9.05225 9.49994 8.49997V6.49997C9.49994 5.94768 9.05222 5.49997 8.49994 5.49997Z" fill="#9EA9A9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9999 6.49997C12.9999 5.11926 14.1192 3.99997 15.4999 3.99997H17.4999C18.8806 3.99997 19.9999 5.11926 19.9999 6.49997V8.49997C19.9999 9.88068 18.8806 11 17.4999 11H15.4999C14.1192 11 12.9999 9.88068 12.9999 8.49997V6.49997ZM15.4999 5.49997H17.4999C18.0522 5.49997 18.4999 5.94768 18.4999 6.49997V8.49997C18.4999 9.05225 18.0522 9.49997 17.4999 9.49997H15.4999C14.9477 9.49997 14.4999 9.05225 14.4999 8.49997V6.49997C14.4999 5.94768 14.9477 5.49997 15.4999 5.49997Z" fill="#9EA9A9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.49994 13C5.11922 13 3.99994 14.1193 3.99994 15.5V17.5C3.99994 18.8807 5.11922 20 6.49994 20H8.49994C9.88065 20 10.9999 18.8807 10.9999 17.5V15.5C10.9999 14.1193 9.88065 13 8.49994 13H6.49994ZM8.49994 14.5H6.49994C5.94765 14.5 5.49994 14.9477 5.49994 15.5V17.5C5.49994 18.0523 5.94765 18.5 6.49994 18.5H8.49994C9.05222 18.5 9.49994 18.0523 9.49994 17.5V15.5C9.49994 14.9477 9.05222 14.5 8.49994 14.5Z" fill="#9EA9A9"/>
+<path d="M12.9999 15.5C12.9999 15.0353 12.9999 14.803 13.0384 14.6098C13.1962 13.8164 13.8164 13.1962 14.6098 13.0384C14.803 13 15.0353 13 15.4999 13V15.5H12.9999Z" fill="#9EA9A9"/>
+<path d="M17.4999 13C17.9646 13 18.1969 13 18.3901 13.0384C19.1835 13.1962 19.8037 13.8164 19.9615 14.6098C19.9999 14.803 19.9999 15.0353 19.9999 15.5H17.4999V13Z" fill="#9EA9A9"/>
+<path d="M17.4999 17.5H19.9999C19.9999 17.9646 19.9999 18.197 19.9615 18.3901C19.8037 19.1835 19.1835 19.8037 18.3901 19.9615C18.1969 20 17.9646 20 17.4999 20V17.5Z" fill="#9EA9A9"/>
+<path d="M12.9999 17.5H15.4999V20C15.0353 20 14.803 20 14.6098 19.9615C13.8164 19.8037 13.1962 19.1835 13.0384 18.3901C12.9999 18.197 12.9999 17.9646 12.9999 17.5Z" fill="#9EA9A9"/>
+</svg>

dapps/react-dapp-auth/public/sun.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0.75C11.4142 0.75 11.75 1.08579 11.75 1.5V3.5C11.75 3.91421 11.4142 4.25 11 4.25C10.5858 4.25 10.25 3.91421 10.25 3.5V1.5C10.25 1.08579 10.5858 0.75 11 0.75Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 11C6.75 8.65279 8.65279 6.75 11 6.75C13.3472 6.75 15.25 8.65279 15.25 11C15.25 13.3472 13.3472 15.25 11 15.25C8.65279 15.25 6.75 13.3472 6.75 11ZM11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25Z" fill="white"/>
+<path d="M11.75 18.5C11.75 18.0858 11.4142 17.75 11 17.75C10.5858 17.75 10.25 18.0858 10.25 18.5V20.5C10.25 20.9142 10.5858 21.25 11 21.25C11.4142 21.25 11.75 20.9142 11.75 20.5V18.5Z" fill="white"/>
+<path d="M3.75225 3.75216C4.04515 3.45926 4.52002 3.45926 4.81291 3.75216L6.22713 5.16637C6.52002 5.45926 6.52002 5.93414 6.22713 6.22703C5.93423 6.51992 5.45936 6.51992 5.16647 6.22703L3.75225 4.81282C3.45936 4.51992 3.45936 4.04505 3.75225 3.75216Z" fill="white"/>
+<path d="M16.8337 15.773C16.5408 15.4801 16.0659 15.4801 15.773 15.773C15.4801 16.0659 15.4801 16.5407 15.773 16.8336L17.1872 18.2478C17.4801 18.5407 17.955 18.5407 18.2479 18.2478C18.5408 17.9549 18.5408 17.4801 18.2479 17.1872L16.8337 15.773Z" fill="white"/>
+<path d="M21.25 11C21.25 11.4142 20.9142 11.75 20.5 11.75H18.5C18.0858 11.75 17.75 11.4142 17.75 11C17.75 10.5858 18.0858 10.25 18.5 10.25H20.5C20.9142 10.25 21.25 10.5858 21.25 11Z" fill="white"/>
+<path d="M3.5 11.75C3.91421 11.75 4.25 11.4142 4.25 11C4.25 10.5858 3.91421 10.25 3.5 10.25H1.5C1.08579 10.25 0.75 10.5858 0.75 11C0.75 11.4142 1.08579 11.75 1.5 11.75H3.5Z" fill="white"/>
+<path d="M18.2479 3.75216C18.5408 4.04506 18.5408 4.51993 18.2479 4.81282L16.8336 6.22704C16.5408 6.51993 16.0659 6.51993 15.773 6.22704C15.4801 5.93414 15.4801 5.45927 15.773 5.16638L17.1872 3.75216C17.4801 3.45927 17.955 3.45927 18.2479 3.75216Z" fill="white"/>
+<path d="M6.22711 16.8336C6.52 16.5407 6.52 16.0659 6.22711 15.773C5.93421 15.4801 5.45934 15.4801 5.16645 15.773L3.75223 17.1872C3.45934 17.4801 3.45934 17.955 3.75223 18.2478C4.04513 18.5407 4.52 18.5407 4.81289 18.2478L6.22711 16.8336Z" fill="white"/>
+</svg>

dapps/react-dapp-auth/styles/globals.css

@@ -1,7 +1,20 @@
+:root {
+  --primary-bg: #1e1e1e;
+  --secondary-bg: #272a2a;
+  --qr-bg: #141414;
+  --text-color: white;
+  --wc-btn-bg: #19324d;
+  --wc-btn-brdr: #0f4b8a;
+  --wc-btn-clr: #66b1ff;
+}
+
+* {
+  transition: background 0.25s ease-in-out;
+}
+
 html,
 body {
-  background-color: #141414 !important;
+  color: var(--text-color) !important;
-  color: white !important;
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
@@ -26,3 +39,50 @@ a {
     background: black;
   }
 }
+
+.bg-primary {
+  background: var(--primary-bg);
+}
+
+.bg-qr {
+  background: var(--qr-bg);
+}
+
+.bg-secondary {
+  background: var(--secondary-bg);
+}
+
+.wc-button {
+  background: var(--wc-btn-bg) !important;
+  border: solid 1px var(--wc-btn-brdr);
+  color: var(--wc-btn-clr) !important;
+}
+
+.theme-switcher-dark > span > span {
+  background: url("/moon.svg") no-repeat #66b1ff !important;
+}
+
+.theme-switcher-light > span > span {
+  background: url("/sun.svg") no-repeat #66b1ff !important;
+}
+
+.theme-switcher > span {
+  border: solid 2px white;
+}
+
+.theme-switcher-light > span {
+  background: url("/moon.svg") no-repeat #3b4040 !important;
+  background-repeat: no-repeat !important;
+  background-position: 90% center !important;
+}
+
+.theme-switcher-dark > span {
+  background: url("/sun.svg") no-repeat #3b4040 !important;
+  background-repeat: no-repeat !important;
+  background-position: 10% center !important;
+}
+
+.theme-switcher > span > span {
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}

dapps/react-dapp-auth/views/DefaultView.tsx

@@ -0,0 +1,51 @@
+import { Box, Button, Flex, Heading, Image, position } from "@chakra-ui/react";
+
+const DefaultView: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  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"
+        >
+          <Flex gap="1em">
+            <Image src="/wc.png" fit="scale-down" alt="WC" />
+            <span style={{ color: "white" }}>WalletConnect</span>
+          </Flex>
+        </Button>
+      </Flex>
+    </Box>
+  );
+};
+
+export default DefaultView;

dapps/react-dapp-auth/views/QrView.tsx

@@ -0,0 +1,83 @@
+import {
+  Text,
+  Box,
+  Divider,
+  Flex,
+  Heading,
+  useToast,
+  Button,
+  Grid,
+  Image,
+} from "@chakra-ui/react";
+import Qrcode from "qrcode";
+import { useEffect, useRef } from "react";
+
+const QrView: React.FC<{ uri: string }> = ({ uri }) => {
+  const canvasRef = useRef(null);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
+  }, [uri, canvasRef]);
+
+  const onClick = async () => {
+    await navigator.clipboard.writeText(uri);
+    toast({
+      title: "Copied URI",
+    });
+  };
+
+  return (
+    <Box width="100%" height="100%" padding="1em">
+      <Flex
+        className="bg-secondary"
+        alignItems="center"
+        borderRadius="24px"
+        flexDir="column"
+      >
+        <Grid
+          padding="2em"
+          borderTopRadius="24px"
+          placeItems="center"
+          className="bg-qr"
+          borderBottom="solid 1px white"
+          width="100%"
+          height="100%"
+        >
+          <canvas
+            onClick={onClick}
+            ref={canvasRef}
+            height="20%"
+            width="20%"
+            style={{
+              borderRadius: "24px",
+              minWidth: "20%",
+              minHeight: "20%",
+            }}
+          />
+        </Grid>
+
+        <Flex gap="3" flexDir="column" alignItems="center" padding="2em">
+          <Flex gap="1em">
+            <Image src="/scan.svg" alt="scan" />
+            <Text fontWeight={800} textAlign="center" fontSize="1.5em">
+              Scan with your phone
+            </Text>
+          </Flex>
+
+          <Text fontWeight={600} textAlign="center">
+            Open your camera app or mobile wallet and scan the code to connect
+          </Text>
+          <Button onClick={onClick} borderRadius="20px" className="wc-button">
+            <Flex gap="1em">
+              <Image src="/copy.svg" alt="scan" />
+              <Text>Copy to clipboard</Text>
+            </Flex>
+          </Button>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default QrView;

dapps/react-dapp-auth/views/SignedInView.tsx

@@ -0,0 +1,113 @@
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Grid,
+  Image,
+  Spinner,
+  Text,
+} from "@chakra-ui/react";
+import truncate from "smart-truncate";
+import { BigNumber, providers } from "ethers";
+import { useCallback, useEffect, useState } from "react";
+
+const SignedInView: React.FC<{ address: string }> = ({ address }) => {
+  const [balance, setBalance] = useState<number>();
+  const [avatar, setAvatar] = useState<string | null>();
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const innerEffect = async (address: string) => {
+      setLoading(true);
+      const provider = providers.getDefaultProvider();
+      const avatar = await provider.getAvatar(address);
+      const balance = await provider.getBalance(address);
+      setAvatar(avatar);
+      setBalance(balance.toNumber());
+      setLoading(false);
+    };
+    if (address) {
+      innerEffect(address);
+    }
+  }, [setBalance, address]);
+
+  const onSignOut = useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  return (
+    <Box className="bg-secondary" borderRadius={"24px"} padding="2em">
+      <Flex flexDir={"column"} gap="5">
+        <Flex justifyContent="space-between" gap="10">
+          <Grid
+            borderRadius={"100%"}
+            width="6em"
+            height="6em"
+            className="bg-qr"
+            border="solid 1px #585F5F"
+            placeItems="center"
+          >
+            {isLoading ? (
+              <Spinner />
+            ) : (
+              avatar && <Image src={avatar} alt="avatar" />
+            )}
+          </Grid>
+          <Flex
+            padding="0.5em"
+            border="solid 1px #585F5F"
+            borderRadius={"16px"}
+            height={"min-content"}
+            className="bg-qr"
+            alignItems="center"
+            gap="0.5em"
+          >
+            <Box
+              width="0.75em"
+              height="0.75em"
+              backgroundColor="#2BEE6C"
+              borderRadius={"100%"}
+              style={{ filter: "blur(1px)" }}
+            />
+            <span>Connected</span>
+          </Flex>
+        </Flex>
+        <Flex>
+          <Text fontWeight="800" fontSize={"1.5em"}>
+            {truncate(address, 12, { position: 7 })}
+          </Text>
+        </Flex>
+        <Divider />
+        <Flex
+          justifyContent="space-between"
+          fontSize={"1.5em"}
+          alignItems="center"
+        >
+          <Text>Balance</Text>
+          {isLoading ? (
+            <Spinner />
+          ) : (
+            <Flex alignItems="center" gap="2">
+              <Image src="/eth.png" alt="ETH" width="1.5em" height="1.5em" />
+              <Text>{balance} ETH</Text>
+            </Flex>
+          )}
+        </Flex>
+        <Flex width={"100%"} justifyContent="center">
+          <Button
+            width={"100%"}
+            className="wc-button"
+            padding={"1.5em"}
+            borderRadius={"16px"}
+            onClick={onSignOut}
+          >
+            Sign Out
+          </Button>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default SignedInView;