diff --git a/examples/with-solidstart/.env.example b/examples/with-solidstart/.env.example new file mode 100644 index 000000000..de0f9caca --- /dev/null +++ b/examples/with-solidstart/.env.example @@ -0,0 +1,2 @@ +# Generate using `openssl rand -hex 32` +SESSION_SECRET=your-32char-secret-key-goes-here diff --git a/examples/with-solidstart/.gitignore b/examples/with-solidstart/.gitignore new file mode 100644 index 000000000..d9ec65bf5 --- /dev/null +++ b/examples/with-solidstart/.gitignore @@ -0,0 +1,5 @@ +node_modules +.data +pnpm-lock.yaml +package-lock.json +.env diff --git a/examples/with-solidstart/README.md b/examples/with-solidstart/README.md new file mode 100644 index 000000000..da432325e --- /dev/null +++ b/examples/with-solidstart/README.md @@ -0,0 +1,63 @@ +[![Banner](https://github.com/blocknative/web3-onboard/blob/develop/assets/core.svg)](https://web3onboard.thirdweb.com) + +# SolidStart Example + +Everything you need to integrate Web3Onboard in [SolidStart](https://start.solidjs.com) + +## Features + +- **SSR Compliant**: Web3 code loads only on the client +- **Auth Context**: A reactive context to monitor wallet changes, handle signatures, and more +- **Database**: Includes `unstorage`, a lightweight file-based DB +- **Client-Only**: Easily isolate client-side logic for Web3 interactions + +## Getting Started + +1. Rename `.env.example` to `.env`. For production, generate a secure `SESSION_SECRET` with + + ```bash + openssl rand -hex 32 + ``` + +2. Install dependencies + + ```bash + # use preferred package manager + npm install + ``` + +3. Run the development server + + ```bash + # use preferred package manager + npm run dev + ``` + +For more details, refer to SolidStart's [README.md](https://github.com/solidjs/solid-start/blob/main/packages/start/README.md) + +## 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. **In Component** (e.g. for a component showing eth balance) + + ```jsx + import { clientOnly } from "@solidjs/start/client"; + + const ClientComponent = clientOnly(() => import("./ClientOnlyComponent")); + ``` + +2. **In Routes** (e.g. for a `/swap` page) + + ```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). + +
+ +
diff --git a/examples/with-solidstart/app.config.ts b/examples/with-solidstart/app.config.ts new file mode 100644 index 000000000..8c75b850f --- /dev/null +++ b/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()] } +}); diff --git a/examples/with-solidstart/package.json b/examples/with-solidstart/package.json new file mode 100644 index 000000000..fe3bf82d6 --- /dev/null +++ b/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" + } +} diff --git a/examples/with-solidstart/public/favicon.svg b/examples/with-solidstart/public/favicon.svg new file mode 100644 index 000000000..e9a615cff --- /dev/null +++ b/examples/with-solidstart/public/favicon.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/with-solidstart/public/logo.png b/examples/with-solidstart/public/logo.png new file mode 100644 index 000000000..ffd573655 Binary files /dev/null and b/examples/with-solidstart/public/logo.png differ diff --git a/examples/with-solidstart/public/onboard.svg b/examples/with-solidstart/public/onboard.svg new file mode 100644 index 000000000..56647b05b --- /dev/null +++ b/examples/with-solidstart/public/onboard.svg @@ -0,0 +1 @@ + diff --git a/examples/with-solidstart/src/app.css b/examples/with-solidstart/src/app.css new file mode 100644 index 000000000..cadabaecd --- /dev/null +++ b/examples/with-solidstart/src/app.css @@ -0,0 +1,17 @@ +@import "tailwindcss"; + +#app { + @apply flex flex-col items-center justify-center min-h-screen bg-gray-50 gap-16 px-4 select-none noscript:hidden; +} + +h1 { + @apply uppercase text-6xl text-sky-700 font-thin; +} + +button { + @apply cursor-pointer; +} + +.loader { + @apply animate-spin border-current border-t-transparent text-current rounded-full; +} diff --git a/examples/with-solidstart/src/app.tsx b/examples/with-solidstart/src/app.tsx new file mode 100644 index 000000000..3197390e8 --- /dev/null +++ b/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 ( + ( + + + +