LIT-Protocol · anshss · Nov 30, 2024 · Nov 30, 2024 · Nov 30, 2024 · Nov 30, 2024
diff --git a/lit-configuration-guides/lit/.gitignore b/lit-configuration-guides/lit/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/lit-configuration-guides/lit/README.md b/lit-configuration-guides/lit/README.md
@@ -0,0 +1,14 @@
+## Used framework
+Lit
+
+## Framework docs
+https://vitejs.dev/config/
+
+## Configuration file
+You need to configure the following
+1. Setup the project using vite
+2. Create a [vite.config.ts](https://github.com/anshss/lit-configuration-guides/blob/vite-react/vite-react/vite.config.ts) file
+
+## Getting started
+1. `npm i`
+2. `npm run dev`
diff --git a/lit-configuration-guides/lit/index.html b/lit-configuration-guides/lit/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lit:: lit.dev framework</title>
+</head>
+<body>
+  <my-lit-app></my-lit-app>
+  <script type="module" src="./src/my-lit-app.ts"></script>
+</body>
+</html>
diff --git a/lit-configuration-guides/lit/package.json b/lit-configuration-guides/lit/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "lit",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lit-protocol/lit-node-client": "^7.0.0",
+    "@walletconnect/modal": "^2.7.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "ethers": "^5.7.2",
+    "lit": "^3.1.4",
+    "stream-browserify": "^3.0.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vm-browserify": "^1.1.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4"
+  }
+}
diff --git a/lit-configuration-guides/lit/public/vite.svg b/lit-configuration-guides/lit/public/vite.svg
diff --git a/lit-configuration-guides/lit/src/assets/lit.svg b/lit-configuration-guides/lit/src/assets/lit.svg
diff --git a/lit-configuration-guides/lit/src/index.css b/lit-configuration-guides/lit/src/index.css
@@ -0,0 +1,38 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
diff --git a/lit-configuration-guides/lit/src/my-lit-app.ts b/lit-configuration-guides/lit/src/my-lit-app.ts
@@ -0,0 +1,39 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { LitNodeClient } from "@lit-protocol/lit-node-client";
+@customElement("my-lit-app")
+class MyLitApp extends LitElement {
+    static styles = css`
+        .app {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            padding: 2rem;
+        }
+    `;
+
+    async litSetup() {
+        console.log("connecting to lit...");
+        const litNodeClient = new LitNodeClient({
+            litNetwork: "datil-dev",
+            debug: false,
+        });
+        await litNodeClient.connect();
+        console.log("connected!");
+    }
+
+    render() {
+        return html`
+            <div class="app">
+                <h1>Using with Lit framework</h1>
+                <p>Check console</p>
+                <button @click="${this.litSetup}">Instantiate Lit</button>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "my-lit-app": MyLitApp;
+    }
+}
diff --git a/lit-configuration-guides/lit/src/polyfills.ts b/lit-configuration-guides/lit/src/polyfills.ts
@@ -0,0 +1,6 @@
+import 'buffer';
+import 'crypto-browserify';
+import 'stream-browserify';
+import 'vm-browserify';
+
+(window as any).global = window;
diff --git a/lit-configuration-guides/lit/src/vite-env.d.ts b/lit-configuration-guides/lit/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/lit-configuration-guides/lit/tsconfig.json b/lit-configuration-guides/lit/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/lit-configuration-guides/lit/vite.config.ts b/lit-configuration-guides/lit/vite.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import react from '@vitejs/plugin-react';
+import inject from '@rollup/plugin-inject';
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+export default defineConfig({
+    plugins: [
+        react(),
+        nodePolyfills()
+    ],
+    resolve: {
+        alias: {
+            buffer: 'buffer/',
+            crypto: 'crypto-browserify',
+            stream: 'stream-browserify',
+            vm: 'vm-browserify',
+        },
+    },
+    build: {
+        rollupOptions: {
+            plugins: [
+                inject({
+                    Buffer: ['buffer', 'Buffer']
+                })
+            ]
+        }
+    }
+});
diff --git a/lit-configuration-guides/nextjs/.eslintrc.json b/lit-configuration-guides/nextjs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/lit-configuration-guides/nextjs/.gitignore b/lit-configuration-guides/nextjs/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
diff --git a/lit-configuration-guides/nextjs/README.md b/lit-configuration-guides/nextjs/README.md
@@ -0,0 +1,12 @@
+## Used framework
+NextJs
+
+## Framework docs
+[https://vuejs.org/](https://nextjs.org/docs)
+
+## Configuration file
+No changes needed
+
+## Getting started
+1. `npm i`
+2. `npm run dev`
diff --git a/lit-configuration-guides/nextjs/app/favicon.ico b/lit-configuration-guides/nextjs/app/favicon.ico
diff --git a/lit-configuration-guides/nextjs/app/globals.css b/lit-configuration-guides/nextjs/app/globals.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/lit-configuration-guides/nextjs/app/layout.tsx b/lit-configuration-guides/nextjs/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/lit-configuration-guides/nextjs/app/page.tsx b/lit-configuration-guides/nextjs/app/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+import { LitNodeClient } from "@lit-protocol/lit-node-client";
+
+export default function Home() {
+    async function litSetup() {
+        console.log("connecting to lit...");
+        const litNodeClient = new LitNodeClient({
+            litNetwork: "datil-dev",
+            debug: true,
+        });
+        await litNodeClient.connect();
+        console.log("connected!");
+    }
+
+    return (
+        <div className="flex flex-col items-center gap-[1.2rem]">
+            <h1>Lit with Next</h1>
+            <p>Check console</p>
+            <button
+                onClick={litSetup}
+                className="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:shadow-outline"
+            >
+                Instantiate Lit
+            </button>
+        </div>
+    );
+}
diff --git a/lit-configuration-guides/nextjs/next.config.mjs b/lit-configuration-guides/nextjs/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;