removed nextjs example implementation

.eslintrc.json

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

.gitignore

@@ -1,37 +1,10 @@
-# 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
+node_modules
-
+/build
-# debug
+/.svelte-kit
-npm-debug.log*
+/package
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
 .env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

README.md

@@ -1,44 +1,38 @@
-# `signAndSaveAuthMessage` example
+# create-svelte
 
-This is a [Next.js](https://nextjs.org/) example that demonstrates how to use the `signAndSaveAuthMessage` function from the `@lit-protocol/auth-browser` package with a **Connect Wallet** modal like [RainbowKit](https://www.rainbowkit.com/docs/introduction).
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-Note: This example uses prior versions of RainbowKit and `wagmi` that are compatible with `ethers`.
+## Creating a project
 
-## 💻 Getting Started
+If you're seeing this, you've probably already done this step. Congrats!
-
-1. Clone this repo and download dependencies:
 
 ```bash
-git clone git@github.com:LIT-Protocol/sdk-examples.git
+# create a new project in the current directory
-cd connect-wallet-authsig
+npm create svelte@latest
-npm install
+
-# or
+# create a new project in my-app
-yarn
+npm create svelte@latest my-app
-# or
-pnpm
 ```
 
-2. Add environment variables:
+## Developing
 
-```bash
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-NEXT_PUBLIC_ENABLE_TESTNETS='<true or false>'
-NEXT_PUBLIC_WC_PROJECT_ID='<Your WalletConnect project ID>'
-```
-
-3. Run the development server:
 
 ```bash
 npm run dev
-# or
+
-yarn dev
+# or start the server and open the app in a new browser tab
-# or
+npm run dev -- --open
-pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Building
 
+To create a production version of your app:
 
-## 📚 Resources
+```bash
+npm run build
+```
 
-- [Lit Protocol Developer Docs](https://developer.litprotocol.com/)
+You can preview the production build with `npm run preview`.
-- [`@lit-protocol/auth-browser` API Docs](https://js-sdk.litprotocol.com/modules/auth_browser_src.html)
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

jsconfig.json

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

next.config.js

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

package.json

@@ -1,33 +1,47 @@
 {
-  "name": "connect-wallet-authsig",
+	"name": "svelte",
-  "version": "0.1.0",
+	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-    "dev": "next dev",
+		"dev": "vite dev",
-    "build": "next build",
+		"build": "vite build",
-    "start": "next start",
+		"preview": "vite preview",
-    "lint": "next lint"
+		"test": "npm run test:integration && npm run test:unit",
-  },
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-  "dependencies": {
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "@lit-protocol/auth-browser": "^2.2.41",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "@lit-protocol/contracts-sdk": "^2.2.41",
+		"format": "prettier --plugin-search-dir . --write .",
-    "@lit-protocol/lit-node-client": "^2.2.41",
+		"test:integration": "playwright test",
-    "@lit-protocol/pkp-ethers": "^2.2.41",
+		"test:unit": "vitest"
-    "@rainbow-me/rainbowkit": "^0.12.17",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
-    "ethers": "^5.7.2",
-    "next": "13.4.9",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "vite-plugin-global": "^0.0.1",
-    "wagmi": "^0.12.19",
-    "web3": "^4.0.3",
-    "web3-providers-http": "^4.0.3"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
 		"postcss": "^8.4.26",
-    "tailwindcss": "^3.3.3"
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"vitest": "^0.32.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@lit-protocol/constants": "^2.2.41",
+		"@lit-protocol/lit-node-client": "^2.2.41",
+		"@lit-protocol/pkp-ethers": "^2.2.41",
+		"@lit-protocol/types": "^2.2.41",
+		"@wagmi/core": "^1.3.8",
+		"viem": "^1.3.0"
 	}
 }

src/app/globals.css

@@ -1,140 +0,0 @@
-: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;
-}

src/app/layout.js

@@ -1,21 +0,0 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-import { Providers } from './provider'
-import '@rainbow-me/rainbowkit/styles.css'
-
-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}>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  )
-}

src/app/page.js

@@ -1,150 +0,0 @@
-'use client'
-
-import { ConnectButton } from '@rainbow-me/rainbowkit'
-import { useAccount, useNetwork, useSigner } from 'wagmi'
-import { ethConnect, disconnectWeb3 } from '@lit-protocol/lit-node-client'
-import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants'
-import { useEffect, useState } from 'react'
-import { PKPEthersWallet } from "@lit-protocol/pkp-ethers";
-
-
-export default function Home() {
-  const [authSig, setAuthSig] = useState(null)
-  const [error, setError] = useState(null)
-
-  const { address, isConnected, isDisconnected } = useAccount()
-  const { data: signer } = useSigner()
-  const { chain } = useNetwork()
-
-  async function generateAuthSig(signer, address, chainId) {
-    setAuthSig(null);
-    setError(null);
-    try {
-      console.log("LOG " + (useSigner.data))
-      const newAuthSig = await ethConnect.signAndSaveAuthMessage({
-        web3: signer.provider,
-        account: address.toLowerCase(),
-        chainId: chainId,
-      });
-      setAuthSig(newAuthSig);
-    } catch (err) {
-      console.error(err);
-      setError(`Failed to sign auth message: ${err.message}`);
-    }
-  }
-
-
-  async function sendTXethereum(){
-    
-    const pkpWallet = new PKPEthersWallet({
-      controllerAuthSig: authSig,
-      pkpPubKey: "046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571",
-      rpc: "https://rpc.eth.gateway.fm",
-    });
-    await pkpWallet.init();
-    console.log(pkpWallet);
-
-    const from = "0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE";
-    const to = "0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A";
-    const value = BigInt(1000000000000000);
-    const chainId = 1;
-    const gasLimit = 21000;
-
-    // @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
-    const transactionRequest = {
-      from,
-      to,
-      value,
-      chainId,
-      gasLimit,
-    };
-
-    const signedTransactionRequest = await pkpWallet.signTransaction(
-      transactionRequest
-    );
-
-    await pkpWallet.sendTransaction(signedTransactionRequest);
-  }
-
-  async function sendTXgnosis(){
-    
-    const pkpWallet = new PKPEthersWallet({
-      controllerAuthSig: authSig,
-      pkpPubKey: "046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571",
-      rpc: "https://rpc.gnosischain.com/",
-    });
-    await pkpWallet.init();
-    console.log(pkpWallet);
-
-    const from = "0x06B6BE47c86cfcDF3f77c0e17e7aD8af750782aE";
-    const to = "0x1A5cfC9EA11afb50011F847fb7dC07bA1e18b05A";
-    const value = BigInt(1000000000000000);
-
-    // @lit-protocol/pkp-ethers will automatically add missing fields (nonce, chainId, gasPrice, gasLimit)
-    const transactionRequest = {
-      from,
-      to,
-      value,
-    };
-
-    const signedTransactionRequest = await pkpWallet.signTransaction(
-      transactionRequest
-    );
-
-    await pkpWallet.sendTransaction(signedTransactionRequest);
-  }
-
-
-  // Fetch auth sig from local storage
-  useEffect(() => {
-    if (!authSig) {
-      const storedAuthSig = localStorage.getItem(LOCAL_STORAGE_KEYS.AUTH_SIGNATURE);
-      if (storedAuthSig) {
-        const parsedAuthSig = JSON.parse(storedAuthSig);
-        setAuthSig(parsedAuthSig);
-      }
-    }
-  }, [authSig])
-  
-  // Generate auth sig if not already generated and if wallet is connected
-  useEffect(() => {
-    if (!authSig && isConnected && signer) {
-      generateAuthSig(signer, address, chain.id);
-    }
-  }, [authSig, isConnected, signer, address, chain])
-
-  // Clear auth sig if wallet is disconnected
-  useEffect(() => {
-    if (isDisconnected) {
-      disconnectWeb3();
-      setAuthSig(null);
-    }
-  }, [isDisconnected])
-
-  return (
-    <main className="main">
-      {error && 
-        <div className='alert alert--error'>
-          <p>❗️ {error}</p>
-          <button className='alert__btn' onClick={() => generateAuthSig(signer, address, chain.id)}>
-            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>
-      }
-      <ConnectButton />
-      <button style={{marginTop: "2rem", padding: "1rem"}} onClick={() => sendTXgnosis()}>
-        send 0.001 xdai
-      </button>
-
-      <button style={{marginTop: "2rem", padding: "1rem"}} onClick={() => sendTXethereum()}>
-        send 0.001 eth
-      </button>
-    </main>
-  )
-}

src/app/provider.js

@@ -1,61 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {
-  RainbowKitProvider,
-  getDefaultWallets,
-  connectorsForWallets,
-  darkTheme,
-} from '@rainbow-me/rainbowkit';
-import { configureChains, createClient, WagmiConfig } from 'wagmi';
-import {
-  mainnet,
-  polygon,
-  goerli,
-  polygonMumbai,
-} from 'wagmi/chains';
-import { publicProvider } from 'wagmi/providers/public';
-
-const { chains, provider, webSocketProvider } = configureChains(
-  [
-    mainnet,
-    polygon,    
-    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [goerli, polygonMumbai] : []),
-  ],
-  [publicProvider()]
-);
-
-const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
-
-const { wallets } = getDefaultWallets({
-  appName: 'My RainbowKit App',
-  projectId,
-  chains,
-});
-
-const connectors = connectorsForWallets([
-  ...wallets,
-]);
-
-const client = createClient({
-  autoConnect: true,
-  connectors,
-  provider,
-  webSocketProvider,
-});
-
-const demoAppInfo = {
-  appName: 'Rainbowkit Demo',
-};
-
-export function Providers({ children }) {
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => setMounted(true), []);
-  return (
-    <WagmiConfig client={client}>
-      <RainbowKitProvider chains={chains} appInfo={demoAppInfo} theme={darkTheme()}>
-        {mounted && children}
-      </RainbowKitProvider>
-    </WagmiConfig>
-  );
-}

svelte/.gitignore

@@ -1,10 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*

svelte/README.md

@@ -1,38 +0,0 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

svelte/package.json

@@ -1,47 +0,0 @@
-{
-	"name": "svelte",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"test": "npm run test:integration && npm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"postcss": "^8.4.26",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tailwindcss": "^3.3.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.32.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"@lit-protocol/constants": "^2.2.41",
-		"@lit-protocol/lit-node-client": "^2.2.41",
-		"@lit-protocol/pkp-ethers": "^2.2.41",
-		"@lit-protocol/types": "^2.2.41",
-		"@wagmi/core": "^1.3.8",
-		"viem": "^1.3.0"
-	}
-}