[V2/V3] [Feat] Update lit modal to support wallet connect (#198)

* feat: support wc v2 for lit-connect-modal

* chore: remove old file

* - moved lit-connect-model dependency

* Update esbuilder/lit-connect-modal/esbuild.js

Co-authored-by: Adarsh-Kumar28 <115020815+Adarsh-Kumar28@users.noreply.github.com>
Signed-off-by: Anson <ansonox@gmail.com>

* fix: minor changes required

---------

Signed-off-by: Anson <ansonox@gmail.com>
Co-authored-by: sarahzdev <sarah.hg.zhang@gmail.com>
Co-authored-by: Adarsh-Kumar28 <115020815+Adarsh-Kumar28@users.noreply.github.com>

apps/demo-lit-connect-modal-next/.eslintrc.json

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

apps/demo-lit-connect-modal-next/.gitignore

@@ -0,0 +1,35 @@
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/demo-lit-connect-modal-next/README.md

@@ -0,0 +1,19 @@
+# `checkAndSignAuthMessage` Example ✍️
+
+This is an example web app that shows how you can easily obtain an `AuthSig` using the `checkAndSignAuthMessage` function.
+
+When the function is called, it prompts a wallet selection pop-up in the user's browser. Once the user's wallet is connected, the user is asked to sign a message, thereby confirming the ownership of their crypto address. The `AuthSig`` is then generated, which includes the signature of the user's signed message.
+
+## 💻 Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

apps/demo-lit-connect-modal-next/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

apps/demo-lit-connect-modal-next/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

apps/demo-lit-connect-modal-next/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "demo-lit-connect-modal-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ethersproject/providers": "^5.7.2",
+    "@lit-protocol/auth-browser": "file:../../packages/auth-browser",
+    "@lit-protocol/constants": "file:../../packages/constants",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.13",
+    "ethers": "^5.7.2",
+    "next": "13.4.13",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

apps/demo-lit-connect-modal-next/src/app/globals.css

@@ -0,0 +1,167 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.alert {
+  background-color: rgb(var(--callout-rgb));
+  border: 1px solid rgb(var(--callout-border-rgb));
+  border-radius: 0.5rem;
+  padding: 1rem 0.875rem;
+  margin: 1rem 0;
+  max-width: 32rem;
+  font-size: 0.875rem;
+}
+
+.alert__btn {
+  margin-top: 1rem;
+  padding: 0.375rem 0.5rem;
+  cursor: pointer;
+}
+
+.alert--error {
+  border-color: red;
+}
+
+.alert--success {
+  border-color: green;
+}
+
+.btn {
+  display: inline-block;
+  font-size: 1rem;
+  text-align: center;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.btn--primary {
+  background-color: blue;
+}
+
+.btn--primary:hover {
+  background-color: darkblue;
+}
+
+.btn--secondary {
+  background-color: transparent;
+  border-color: blue;
+}
+
+.btn--secondary:hover {
+  background-color: rgba(0, 0, 255, 0.4);
+}

apps/demo-lit-connect-modal-next/src/app/layout.js

@@ -0,0 +1,17 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

apps/demo-lit-connect-modal-next/src/app/page.js

@@ -0,0 +1,67 @@
+'use client';
+
+import {
+  checkAndSignAuthMessage,
+  disconnectWeb3,
+} from '@lit-protocol/auth-browser';
+import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
+import { useState } from 'react';
+
+export default function Home() {
+  const [authSig, setAuthSig] = useState(null);
+  const [error, setError] = useState(null);
+
+  async function generateAuthSig() {
+    setAuthSig(null);
+    setError(null);
+    try {
+      const newAuthSig = await checkAndSignAuthMessage({
+        chain: 'mumbai',
+        walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID,
+      });
+      setAuthSig(newAuthSig);
+    } catch (err) {
+      console.error(err);
+      setError(`Failed to sign auth message: ${err.message}`);
+    }
+  }
+
+  async function disconnect() {
+    setError(null);
+    try {
+      await disconnectWeb3();
+      setAuthSig(null);
+    } catch (err) {
+      console.error(err);
+      setError(`Failed to disconnect: ${err.message}`);
+    }
+  }
+
+  return (
+    <main className="main">
+      {error && (
+        <div className="alert alert--error">
+          <p>❗️ {error}</p>
+          <button className="alert__btn" onClick={generateAuthSig}>
+            Try again
+          </button>
+        </div>
+      )}
+      {authSig ? (
+        <>
+          <p className="alert alert--success">
+            🔐 Auth sig has been generated and stored in local storage under{' '}
+            <code>{LOCAL_STORAGE_KEYS.AUTH_SIGNATURE}</code>!
+          </p>
+          <button className="btn btn--secondary" onClick={disconnect}>
+            Disconnect
+          </button>
+        </>
+      ) : (
+        <button className="btn btn--primary" onClick={generateAuthSig}>
+          Connect & sign
+        </button>
+      )}
+    </main>
+  );
+}

apps/react/webpack.config.js

@@ -12,6 +12,9 @@ module.exports = (config) => {
     ...config.resolve.fallback,
     crypto: require.resolve('crypto-browserify'),
     stream: require.resolve('stream-browserify'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    zlib: require.resolve('browserify-zlib'),
   };
 
   return config;

esbuilder/lit-connect-modal/esbuild.js

@@ -0,0 +1,26 @@
+const { build } = require('esbuild');
+const path = require('path');
+const fs = require('fs');
+
+const entryPoint = path.resolve(__dirname, 'src/modal.js');
+const OUTPUT_DIR = 'packages/auth-browser/src/lib/connect-modal/modal.ts';
+
+build({
+  entryPoints: [entryPoint],
+  bundle: true,
+  // minify: true,
+  sourcemap: false,
+  outfile: OUTPUT_DIR,
+  globalName: 'LitConnectModal',
+  loader: {
+    '.svg': 'dataurl',
+    '.css': 'text',
+  },
+  sourceRoot: './',
+  format: 'esm',
+}).then(() => {
+  // append @ts-nocheck to the top of the file
+  const file = fs.readFileSync(OUTPUT_DIR, 'utf8');
+  const newFileContent = `// @ts-nocheck\n${file}`;
+  fs.writeFileSync(OUTPUT_DIR, newFileContent, 'utf8');
+});

esbuilder/lit-connect-modal/src/helpers/providerMethods.js

@@ -0,0 +1,10 @@
+const providerMethods = {
+  walletconnect: (providerOptions, id) => {
+    const walletConnectData = providerOptions.walletconnect;
+    const walletConnectProvider = walletConnectData.provider;
+
+    return walletConnectProvider;
+  },
+};
+
+export default providerMethods;