Add SolidStart example

examples/with-solidstart/.env.example

@@ -0,0 +1,2 @@
+# Generate using `openssl rand -hex 32`
+SESSION_SECRET=your-32char-secret-key-goes-here

examples/with-solidstart/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.data
+pnpm-lock.yaml
+package-lock.json
+.env

examples/with-solidstart/README.md

@@ -0,0 +1,63 @@
+[![Banner](https://assets.solidjs.com/banner?background=tiles&type=Start&project=template)](https://github.com/solidjs/solid-start)
+
+Kickstart your DeFi app development with this starter template, built with [SolidStart](https://start.solidjs.com) and [Web3Onboard](https://web3onboard.thirdweb.com).
+It seamlessly integrates SolidStart’s server-side rendering (_SSR_) with client-side Web3 features, leveraging libraries like [ethers.js](https://github.com/ethers-io/ethers.js).
+
+## Features
+
+- **SSR Compliant**: Web3 code loads only on the client, ensuring compatibility with SSR architecture
+- **Auth Context**: A reactive context to monitor wallet changes, handle signatures, and more
+- **Local Storage**: Utilizes a lightweight, file-based database with `unstorage` for persistence
+- **Starter Kit for DeFi**: Preconfigured setup to kickstart your DeFi app development with SolidStart and Web3Onboard
+- **Client-Only**: Easily isolate client-side logic for Web3 interactions
+
+## Getting Started
+
+1. Install dependencies
+
+   ```bash
+   # use preferred package manager
+   npm install
+   ```
+
+2. Run the development server
+
+   ```bash
+   # use preferred package manager
+   npm run dev
+   ```
+
+3. Rename `.env.example` to `.env`. For production, generate a secure `SESSION_SECRET` with
+
+   ```bash
+   openssl rand -hex 32
+   ```
+
+## Usage
+
+To ensure Web3-related logic runs only on the client, use the `clientOnly` utility from SolidStart. Here are two ways to implement client-only code:
+
+1. **Client-Only Component** (e.g. for a component showing user balance)
+
+   ```jsx
+   import { clientOnly } from '@solidjs/start/client'
+
+   const ClientComponent = clientOnly(() => import('./ClientOnlyComponent'))
+   ```
+
+2. **Client-Only Page** (e.g. for a `/swap` page)
+   Add the following at the top of your route file to render the entire page on the client:
+
+   ```jsx
+   import { clientOnly } from '@solidjs/start/client'
+
+   export default clientOnly(async () => ({ default: MyPage }))
+   ```
+
+For more details, refer to the `clientOnly` [documentation](https://docs.solidjs.com/solid-start/reference/client/client-only#clientonly).
+
+<div align="center">
+   </br>
+   </br>
+  <img src="public/logo.svg" width="300px">
+</div>

examples/with-solidstart/app.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@solidjs/start/config'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  server: { preset: '' }, // your deployment
+  vite: { plugins: [tailwindcss()] }
+})

examples/with-solidstart/package.json

@@ -0,0 +1,26 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev --port 3001",
+    "build": "vinxi build",
+    "start": "vinxi start"
+  },
+  "dependencies": {
+    "@solidjs/meta": "^0.29.4",
+    "@solidjs/router": "^0.15.3",
+    "@solidjs/start": "^1.2.0",
+    "@web3-onboard/core": "^2.24.1",
+    "@web3-onboard/injected-wallets": "^2.11.3",
+    "ethers": "^6.15.0",
+    "solid-js": "^1.9.10",
+    "unstorage": "1.17.1",
+    "vinxi": "^0.5.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.16",
+    "tailwindcss": "^4.1.16"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

examples/with-solidstart/src/app.css

@@ -0,0 +1,25 @@
+@import 'tailwindcss';
+
+#app {
+  background-color: white;
+  user-select: none;
+  @media (scripting: none) {
+    display: none;
+  }
+}
+
+main {
+  @apply flex flex-col items-center justify-center min-h-screen bg-gray-50 gap-18 px-4;
+}
+
+h1 {
+  @apply uppercase text-6xl text-sky-700 font-thin;
+}
+
+button {
+  cursor: pointer;
+}
+
+.loader {
+  @apply animate-spin border-current border-t-transparent text-current rounded-full;
+}

examples/with-solidstart/src/app.tsx

@@ -0,0 +1,33 @@
+import { Suspense } from 'solid-js'
+import { Router, type RouteDefinition } from '@solidjs/router'
+import { FileRoutes } from '@solidjs/start/router'
+import { MetaProvider } from '@solidjs/meta'
+import { querySession } from './auth'
+import AuthProvider from './auth/Provider'
+import Nav from './components/Nav'
+import ErrorNotification from './components/Error'
+import './app.css'
+
+export const route: RouteDefinition = {
+  preload: ({ location }) => querySession(location.pathname)
+}
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <AuthProvider>
+            <Suspense>
+              <Nav />
+              {props.children}
+              <ErrorNotification />
+            </Suspense>
+          </AuthProvider>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  )
+}