reown-com · rtomas · Feb 11, 2025 · Feb 11, 2025 · Feb 11, 2025
diff --git a/javascript/javascript-wagmi-solidjs/.env.test b/javascript/javascript-wagmi-solidjs/.env.test
@@ -0,0 +1 @@
+VITE_PROJECT_ID=
diff --git a/javascript/javascript-wagmi-solidjs/.gitignore b/javascript/javascript-wagmi-solidjs/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/javascript/javascript-wagmi-solidjs/README.md b/javascript/javascript-wagmi-solidjs/README.md
@@ -0,0 +1,18 @@
+# Reown AppKit Example using wagmi (Vite + SolidJS)
+
+This is a [Vite](https://vitejs.dev) project together with SolidJS.
+
+## Usage
+
+1. Go to [Reown Cloud](https://cloud.reown.com) and create a new project.
+2. Copy your `Project ID`
+3. Rename `.env.example` to `.env` and paste your `Project ID` as the value for `VITE_PROJECT_ID`
+4. Run `pnpm install` to install dependencies
+5. Run `pnpm run dev` to start the development server
+
+## Resources
+
+- [Reown — Docs](https://docs.reown.com)
+- [Vite — GitHub](https://github.com/vitejs/vite)
+- [Vite — Docs](https://vitejs.dev/guide/)
+- [SolidJS](https://www.solidjs.com/)
diff --git a/javascript/javascript-wagmi-solidjs/index.html b/javascript/javascript-wagmi-solidjs/index.html
@@ -0,0 +1,16 @@
+<!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" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App with AppKit</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.jsx" type="module"></script>
+  </body>
+</html>
diff --git a/javascript/javascript-wagmi-solidjs/jsconfig.json b/javascript/javascript-wagmi-solidjs/jsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true
+  }
+}
diff --git a/javascript/javascript-wagmi-solidjs/package.json b/javascript/javascript-wagmi-solidjs/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vite-template-solid-appkit",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.1"
+  },
+  "dependencies": {
+    "@reown/appkit": "1.6.8",
+    "@reown/appkit-adapter-wagmi": "1.6.8",
+    "@wagmi/core": "^2.16.4",
+    "solid-js": "^1.9.3",
+    "viem": "^2.23.1",
+    "wagmi": "^2.14.11"
+  }
+}
diff --git a/javascript/javascript-wagmi-solidjs/src/App.jsx b/javascript/javascript-wagmi-solidjs/src/App.jsx
@@ -0,0 +1,26 @@
+import logo from './logo.svg';
+import styles from './App.module.css';
+import { appKit } from './config/appKit';
+function App() {
+  return (
+    <div class={styles.App}>
+      <header class={styles.header}>
+        <img src={logo} class={styles.logo} alt="logo" />
+        <p>
+          Edit <code>src/App.jsx</code> and save to reload.
+        </p>
+        <a
+          class={styles.link}
+          href="https://github.com/solidjs/solid"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn Solid
+        </a><br/>
+        <appkit-button />
+      </header>
+    </div>
+  );
+}
+
+export default App;
diff --git a/javascript/javascript-wagmi-solidjs/src/App.module.css b/javascript/javascript-wagmi-solidjs/src/App.module.css
@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.logo {
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.link {
+  color: #b318f0;
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/javascript/javascript-wagmi-solidjs/src/assets/favicon.ico b/javascript/javascript-wagmi-solidjs/src/assets/favicon.ico
diff --git a/javascript/javascript-wagmi-solidjs/src/config/appKit.js b/javascript/javascript-wagmi-solidjs/src/config/appKit.js
@@ -0,0 +1,29 @@
+import { arbitrum, mainnet, optimism, polygon, sepolia } from '@reown/appkit/networks'
+import { createAppKit } from '@reown/appkit'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+
+const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+export const networks = [arbitrum, mainnet, optimism, polygon, sepolia]
+
+//Set up the Wagmi Adapter (Config)
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks,
+})
+
+export const appKit = createAppKit({
+  adapters: [wagmiAdapter],
+  networks,
+  projectId,
+  themeMode: 'dark',
+  themeVariables: {
+    '--w3m-accent': '#000000',
+  },
+  features: {
+    analytics: true,
+  }
+})
diff --git a/javascript/javascript-wagmi-solidjs/src/index.css b/javascript/javascript-wagmi-solidjs/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/javascript/javascript-wagmi-solidjs/src/index.jsx b/javascript/javascript-wagmi-solidjs/src/index.jsx
@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+
+import './index.css';
+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);
diff --git a/javascript/javascript-wagmi-solidjs/src/logo.svg b/javascript/javascript-wagmi-solidjs/src/logo.svg
diff --git a/javascript/javascript-wagmi-solidjs/vite.config.js b/javascript/javascript-wagmi-solidjs/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+  },
+});