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>

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

@@ -0,0 +1,41 @@
+import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
+import Link from "next/link";
+
+const Page404 = () => {
+  return (
+    <Flex minHeight="100vh" direction="column" justifyContent="center">
+      <Box marginY={4}>
+        <Heading textAlign="center" size="lg">
+          Page not Found.
+        </Heading>
+
+        <Flex
+          flexDirection="column"
+          justifyContent="center"
+          textAlign="center"
+          marginTop={4}
+          gap={2}
+        >
+          <Text fontSize="sm" color="gray">
+            It&apos;s Okay!
+          </Text>
+          <Link href="/">
+            <Button
+              padding={2}
+              backgroundColor="#3396FF"
+              rounded="xl"
+              _hover={{
+                border: "solid 1px #3396FF",
+                backgroundColor: "black",
+              }}
+            >
+              Let&apos;s Head Back
+            </Button>
+          </Link>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Page404;

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

@@ -8,7 +8,6 @@ import {
   Grid,
   GridItem,
   Image,
-  Text,
 } from "@chakra-ui/react";
 import ThemeSwitcher from "../components/ThemeSwitcher";
 

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

@@ -1,13 +1,22 @@
 import { Box } from "@chakra-ui/react";
 import AuthClient, { generateNonce } from "@walletconnect/auth-client";
-import { version } from "@walletconnect/auth-client/package.json";
+import { Web3Modal } from "@web3modal/standalone";
 import type { NextPage } from "next";
 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}`);
+// 1. Get projectID at https://cloud.walletconnect.com
+const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+if (!projectId) {
+  throw new Error("You need to provide NEXT_PUBLIC_PROJECT_ID env variable");
+}
+
+// 2. Configure web3Modal
+const web3Modal = new Web3Modal({
+  projectId,
+  walletConnectVersion: 2,
+});
 
 const Home: NextPage = () => {
   const [client, setClient] = useState<AuthClient | null>();
@@ -70,11 +79,22 @@ const Home: NextPage = () => {
   const [view, changeView] = useState<"default" | "qr" | "signedIn">("default");
 
   useEffect(() => {
-    if (uri) changeView("qr");
-  }, [uri, changeView]);
+    async function handleOpenModal() {
+      if (uri) {
+        await web3Modal.openModal({
+          uri,
+          standaloneChains: ["eip155:1"],
+        });
+      }
+    }
+    handleOpenModal();
+  }, [uri]);
 
   useEffect(() => {
-    if (address) changeView("signedIn");
+    if (address) {
+      web3Modal.closeModal();
+      changeView("signedIn");
+    }
   }, [address, changeView]);
 
   return (
@@ -82,7 +102,6 @@ const Home: NextPage = () => {
       {view === "default" && (
         <DefaultView onClick={onSignIn} hasInitialized={hasInitialized} />
       )}
-      {view === "qr" && <QrView uri={uri} />}
       {view === "signedIn" && <SignedInView address={address} />}
     </Box>
   );