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/package.json

@@ -13,25 +13,23 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@walletconnect/auth-client": "2.0.4",
+    "@web3modal/standalone": "^2.2.2",
     "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",
     "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"
+    "typescript": "^4.9.5"
   }
 }

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");
+    async function handleOpenModal() {
-  }, [uri, changeView]);
+      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>
   );

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

@@ -1,83 +0,0 @@
-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;

wallets/react-wallet-auth/package-lock.json

@@ -7051,9 +7051,9 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
     "node_modules/json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "dependencies": {
         "minimist": "^1.2.0"
@@ -14821,9 +14821,9 @@
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
     },
     "json5": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
       "requires": {
         "minimist": "^1.2.0"