feat/add auth demos (#49)

* Add auth dapp

* Add initial auth wallet

* Remove unusused files

* Refactor code

* Switched both to NPM, use npm package

dapps/react-dapp-auth/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

dapps/react-dapp-auth/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

dapps/react-dapp-auth/README.md

@@ -0,0 +1,9 @@
+# Auth Client JS demo
+
+This is a demo for the auth client
+
+# Commands
+
+`npm run dev` for development mode
+`npm run build` for building the application
+

dapps/react-dapp-auth/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

dapps/react-dapp-auth/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "auth-sample-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.2.6",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@walletconnect/auth-client": "^0.1.2",
+    "better-sqlite3": "^7.6.2",
+    "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"
+  },
+  "devDependencies": {
+    "@types/node": "18.6.4",
+    "@types/qrcode": "^1.4.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "eslint": "8.21.0",
+    "eslint-config-next": "12.2.4",
+    "typescript": "4.7.4"
+  }
+}

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

@@ -0,0 +1,30 @@
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { ChakraProvider, Container, Flex, Image, Text } from "@chakra-ui/react";
+
+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>
+            </Flex>
+          </Flex>
+          <Component {...pageProps} />
+        </Flex>
+      </Container>
+    </ChakraProvider>
+  );
+}
+
+export default MyApp;

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

@@ -0,0 +1,125 @@
+import {
+  Button,
+  Container,
+  Text,
+  Divider,
+  Flex,
+  Heading,
+  Image,
+  SimpleGrid,
+  useToast,
+} from "@chakra-ui/react";
+import AuthClient from "@walletconnect/auth-client";
+import type { NextPage } from "next";
+import Link from "next/link";
+import Qrcode from "qrcode";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+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 onSignIn = useCallback(() => {
+    if (!client) return;
+    client
+      .request({
+        aud: "http://localhost:3000/",
+        domain: "localhost:3000",
+        chainId: "eip191:1",
+        type: "eip4361",
+        nonce: "nonce",
+        statement: "Sign in with wallet.",
+      })
+      .then(({ uri }) => setUri(uri));
+  }, [client, setUri]);
+
+  useEffect(() => {
+    AuthClient.init({
+      relayUrl:
+        process.env.NEXT_PUBLIC_RELAY_URL || "wss://relay.walletconnect.com",
+      projectId: undefined,
+    })
+      .then((v) => {
+        setClient(v);
+      })
+      .catch(console.log);
+  }, [setClient]);
+
+  useEffect(() => {
+    if (!client) return;
+    client.on("auth_response", (res) => {
+      if (res.params.code !== -1) {
+        setAccepted(true);
+      }
+    });
+  }, [client]);
+
+  useEffect(() => {
+    if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
+  }, [uri, canvasRef]);
+  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 && (
+                <canvas
+                  onClick={() => {
+                    navigator.clipboard.writeText(uri).then(() => {
+                      toast({
+                        title: "URI copied to clipboard",
+                        status: "success",
+                        duration: 1000,
+                      });
+                    });
+                  }}
+                  ref={canvasRef}
+                />
+              )}
+            </Flex>
+          </form>
+          {accepted && (
+            <Button
+              _hover={{ cursor: "pointer" }}
+              p={10}
+              colorScheme="green"
+              isActive={false}
+            >
+              Authenticated
+            </Button>
+          )}
+        </Flex>
+      </Flex>
+    </Container>
+  );
+};
+
+export default Home;

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

@@ -0,0 +1,28 @@
+html,
+body {
+  background-color: #141414 !important;
+  color: white !important;
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}

dapps/react-dapp-auth/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}