diff --git a/javascript/javascript-wagmi-solidjs/.env.test b/javascript/javascript-wagmi-solidjs/.env.test new file mode 100644 index 0000000..545af0c --- /dev/null +++ b/javascript/javascript-wagmi-solidjs/.env.test @@ -0,0 +1 @@ +VITE_PROJECT_ID= \ No newline at end of file diff --git a/javascript/javascript-wagmi-solidjs/.gitignore b/javascript/javascript-wagmi-solidjs/.gitignore new file mode 100644 index 0000000..76add87 --- /dev/null +++ b/javascript/javascript-wagmi-solidjs/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/javascript/javascript-wagmi-solidjs/README.md b/javascript/javascript-wagmi-solidjs/README.md new file mode 100644 index 0000000..6b06a25 --- /dev/null +++ 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/) \ No newline at end of file diff --git a/javascript/javascript-wagmi-solidjs/index.html b/javascript/javascript-wagmi-solidjs/index.html new file mode 100644 index 0000000..639c8c0 --- /dev/null +++ b/javascript/javascript-wagmi-solidjs/index.html @@ -0,0 +1,16 @@ + + + + + + + + Solid App with AppKit + + + +
+ + + + diff --git a/javascript/javascript-wagmi-solidjs/jsconfig.json b/javascript/javascript-wagmi-solidjs/jsconfig.json new file mode 100644 index 0000000..249b273 --- /dev/null +++ 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 new file mode 100644 index 0000000..5a3d900 --- /dev/null +++ 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 new file mode 100644 index 0000000..e395d8e --- /dev/null +++ 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 ( +
+
+ logo +

+ Edit src/App.jsx and save to reload. +

+ + Learn Solid +
+ +
+
+ ); +} + +export default App; diff --git a/javascript/javascript-wagmi-solidjs/src/App.module.css b/javascript/javascript-wagmi-solidjs/src/App.module.css new file mode 100644 index 0000000..48308b2 --- /dev/null +++ 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 new file mode 100644 index 0000000..b836b2b Binary files /dev/null and b/javascript/javascript-wagmi-solidjs/src/assets/favicon.ico differ diff --git a/javascript/javascript-wagmi-solidjs/src/config/appKit.js b/javascript/javascript-wagmi-solidjs/src/config/appKit.js new file mode 100644 index 0000000..7e9eb4c --- /dev/null +++ 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 new file mode 100644 index 0000000..85e778f --- /dev/null +++ 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 new file mode 100644 index 0000000..65fe07f --- /dev/null +++ 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(() => , root); diff --git a/javascript/javascript-wagmi-solidjs/src/logo.svg b/javascript/javascript-wagmi-solidjs/src/logo.svg new file mode 100644 index 0000000..025aa30 --- /dev/null +++ b/javascript/javascript-wagmi-solidjs/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/javascript/javascript-wagmi-solidjs/vite.config.js b/javascript/javascript-wagmi-solidjs/vite.config.js new file mode 100644 index 0000000..9ff59a1 --- /dev/null +++ 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', + }, +});