solidja initial setup

Web3Auth · Nov 1, 2024 · 740af55 · 740af55
1 parent 24afd19
commit 740af55
Show file tree

Hide file tree

Showing 15 changed files with 1,619 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "packages/composables/*",
     "packages/hooks/*",
     "packages/modal",
+    "packages/modal-ui",
     "packages/no-modal",
     "packages/plugins/*",
     "packages/providers/*",

diff --git a/packages/modal-ui/.eslintrc.json b/packages/modal-ui/.eslintrc.json
@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "extends": [
+    "@toruslabs/eslint-config-react"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "root": true,
+  "rules": {
+    "@typescript-eslint/no-throw-literal": 0,
+    "import/extensions": [
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      },
+      "error",
+      "ignorePackages"
+    ],
+    "no-console": 2,
+    "react/no-is-mounted": 0
+  }
+}
diff --git a/packages/modal-ui/.gitignore b/packages/modal-ui/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/packages/modal-ui/README.md b/packages/modal-ui/README.md
@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
diff --git a/packages/modal-ui/index.html b/packages/modal-ui/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Web3auth Modal UI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json
@@ -0,0 +1,48 @@
+{
+  "bugs": {
+    "url": "https://github.com/Web3Auth/Web3Auth/issues"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11"
+  },
+  "description": "Ui modal for web3Auth",
+  "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
+    "@mertasan/tailwindcss-variables": "^2.7.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "solid-devtools": "^0.29.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.2"
+  },
+  "engines": {
+    "node": ">=18.x",
+    "npm": ">=9.x"
+  },
+  "keywords": [
+    "blockchain",
+    "ethereum",
+    "multichainWallet",
+    "solana",
+    "web3Auth",
+    "web3Auth/ui"
+  ],
+  "license": "MIT",
+  "name": "@web3auth/modal-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Web3Auth/Web3Auth.git"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "version": "0.0.0"
+}
diff --git a/packages/modal-ui/postcss.config.js b/packages/modal-ui/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/modal-ui/src/App.tsx b/packages/modal-ui/src/App.tsx
@@ -0,0 +1,20 @@
+import { batch, type Component, createSignal } from "solid-js";
+
+const App: Component = () => {
+  const [counter, setCounter] = createSignal(0);
+
+  const incrementCounter = () => {
+    batch(() => {
+      setCounter((c) => c + 1);
+    });
+  };
+  return (
+    <>
+      <p class="text-4xl text-app-white text-center py-20 bg-app-primary-600">Hello tailwind! hello</p>
+      <br />
+      <button onClick={incrementCounter}>Click to increment - {counter()}</button>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/modal-ui/src/index.css b/packages/modal-ui/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/modal-ui/src/index.tsx b/packages/modal-ui/src/index.tsx
@@ -0,0 +1,14 @@
+/* @refresh reload */
+import "./index.css";
+
+import { render } from "solid-js/web";
+
+import App from "./App";
+
+const root = document.getElementById("root");
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error("Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?");
+}
+
+render(() => <App />, root!);