Add SolidStart web3 onboarding template

Author: thomasbuilds

examples/with-solidstart/.env.example

@@ -0,0 +1,2 @@
+# Generate using `openssl rand -hex 32`
+SESSION_SECRET = myverylongsessionsecretkeythatishouldchange

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,28 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev --port 3001",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "format": "prettier --write . --trailing-comma none"
+  },
+  "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",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.16"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

examples/with-solidstart/public/favicon.svg

@@ -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/public/logo.svg

@@ -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>
+  );
+}