update

Author: thomasbuilds

examples/with-solidstart/README.md

@@ -40,18 +40,18 @@ To ensure Web3-related logic runs only on the client, use the `clientOnly` utili
 1. **Client-Only Component** (e.g. for a component showing user balance)
 
    ```jsx
-   import { clientOnly } from '@solidjs/start/client'
+   import { clientOnly } from "@solidjs/start/client";
 
-   const ClientComponent = clientOnly(() => import('./ClientOnlyComponent'))
+   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'
+   import { clientOnly } from "@solidjs/start/client";
 
-   export default clientOnly(async () => ({ default: MyPage }))
+   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).

examples/with-solidstart/app.config.ts

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

examples/with-solidstart/src/app.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 #app {
   background-color: white;

examples/with-solidstart/src/app.tsx

@@ -1,21 +1,21 @@
-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'
+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 => (
+      root={(props) => (
         <MetaProvider>
           <AuthProvider>
             <Suspense>
@@ -29,5 +29,5 @@ export default function App() {
     >
       <FileRoutes />
     </Router>
-  )
+  );
 }

examples/with-solidstart/src/auth/Provider.tsx

@@ -1,97 +1,90 @@
-import { createEffect, createResource, on, type ParentProps } from 'solid-js'
+import { createEffect, createResource, on, type ParentProps } from "solid-js";
 import {
   useLocation,
   createAsync,
   useAction,
   useSearchParams
-} from '@solidjs/router'
-import injectedWallets from '@web3-onboard/injected-wallets'
-import { signOutAction, querySession } from '~/auth'
-import { sign, authWalletAction, addWalletAction } from '~/auth/web3'
-import useWeb3Onboard, { BASE_ID, load } from '~/web3'
-import Context from './context'
+} from "@solidjs/router";
+import injectedWallets from "@web3-onboard/injected-wallets";
+import { signOutAction, querySession } from "~/auth";
+import { sign, authWalletAction, addWalletAction } from "~/auth/web3";
+import useWeb3Onboard, { load } from "~/web3";
+import Context from "./context";
 
 export default function AuthProvider(props: ParentProps) {
-  const location = useLocation()
-  const [searchParams, setSearchParams] = useSearchParams()
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const session = createAsync(() => querySession(location.pathname), {
     deferStream: true
-  })
+  });
 
-  const authWallet = useAction(authWalletAction)
-  const addWallet = useAction(addWalletAction)
-  const signOut = useAction(signOutAction)
-  const signedIn = () => Boolean(session()?.id)
+  const authWallet = useAction(authWalletAction);
+  const addWallet = useAction(addWalletAction);
+  const signOut = useAction(signOutAction);
+  const signedIn = () => Boolean(session()?.id);
 
   const onboard = useWeb3Onboard({
     wallets: [injectedWallets()],
     connect: { autoConnectLastWallet: true },
-    chains: [{ id: BASE_ID }],
+    chains: [{ id: "0x1" }, { id: "0x2105" }],
     appMetadata: {
-      name: 'SolidStart',
-      description: 'SolidStart web3-onboard template',
-      icon: 'favicon.svg'
+      name: "SolidStart",
+      description: "Web3-onboard template",
+      icon: "favicon.svg"
     }
-  })
+  });
 
   createResource(
-    () => searchParams.login === 'true' && !signedIn() && onboard,
-    async instance => {
+    () => searchParams.login === "true" && !signedIn() && onboard,
+    async (instance) => {
       try {
-        const [wallet] = await instance.connectWallet()
-        if (!wallet?.provider) throw new Error('Wallet connection failed')
-        const address = await sign(wallet.provider)
-        const r = searchParams.redirect
-        await authWallet(address, Array.isArray(r) ? r[0] : r)
+        const [wallet] = await instance.connectWallet();
+        if (!wallet?.provider) throw new Error("Wallet connection failed");
+        const address = await sign(wallet.provider);
+        const r = searchParams.redirect;
+        await authWallet(address, Array.isArray(r) ? r[0] : r);
       } catch (err) {
         setSearchParams({
-          error: err instanceof Error ? err.message : '',
-          login: ''
-        })
+          error: err instanceof Error ? err.message : "",
+          login: ""
+        });
       }
     }
-  )
+  );
 
-  const [web3] = createResource(
-    onboard?.connectedWallet,
-    async ({ provider }) => {
-      if (onboard!.connectedChain().id !== BASE_ID)
-        await onboard!.setChain({ chainId: BASE_ID })
-      return load(provider)
-    }
-  )
+  const [web3] = createResource(onboard?.connectedWallet, load);
 
   createEffect(
     on(
       () => onboard?.walletAddress(),
       async (current, previous) => {
-        const saved = session()?.wallets
-        if (!saved?.length || !previous) return
-        if (!current) await signOut()
+        const saved = session()?.wallets;
+        if (!saved?.length || !previous) return;
+        if (!current) await signOut();
         if (current && current !== previous) {
           try {
-            const { provider } = onboard!.connectedWallet()
-            const addr = current.toLowerCase()
-            const verified = saved.includes(addr) ? addr : await sign(provider)
-            await addWallet(verified)
+            const { provider } = onboard!.connectedWallet();
+            const addr = current.toLowerCase();
+            const verified = saved.includes(addr) ? addr : await sign(provider);
+            await addWallet(verified);
           } catch (err) {
-            setSearchParams({ error: err instanceof Error ? err.message : '' })
+            setSearchParams({ error: err instanceof Error ? err.message : "" });
           }
         }
       },
       { defer: true }
     )
-  )
+  );
 
   const logout = async () => {
-    const wallet = onboard?.connectedWallet()
-    if (wallet) await onboard!.disconnectWallet({ label: wallet.label })
-    return signOut()
-  }
+    const wallet = onboard?.connectedWallet();
+    if (wallet) await onboard!.disconnectWallet({ label: wallet.label });
+    return signOut();
+  };
 
   return (
     <Context.Provider value={{ session, signedIn, logout, web3 }}>
       {props.children}
     </Context.Provider>
-  )
+  );
 }

examples/with-solidstart/src/auth/context.ts

@@ -1,13 +1,13 @@
-import { createContext, type Resource } from 'solid-js'
-import type { AccessorWithLatest } from '@solidjs/router'
-import type { Session } from '~/auth/server'
-import type { Web3 } from '~/web3'
+import { createContext, type Resource } from "solid-js";
+import type { AccessorWithLatest } from "@solidjs/router";
+import type { Session } from "~/auth/server";
+import type { Web3 } from "~/web3";
 
 interface Context {
-  session: AccessorWithLatest<Session | undefined>
-  signedIn: () => boolean
-  logout: () => Promise<never>
-  web3: Resource<Web3>
+  session: AccessorWithLatest<Session | undefined>;
+  signedIn: () => boolean;
+  logout: () => Promise<never>;
+  web3: Resource<Web3>;
 }
 
-export default createContext<Context>()
+export default createContext<Context>();

examples/with-solidstart/src/auth/index.ts

@@ -1,33 +1,34 @@
-import { useContext } from 'solid-js'
-import { query, redirect, action } from '@solidjs/router'
-import { getSession } from './server'
-import context from './context'
+import { useContext } from "solid-js";
+import { query, redirect, action } from "@solidjs/router";
+import { getSession } from "./server";
+import context from "./context";
 
-const PROTECTED_ROUTES = ['/']
+const PROTECTED_ROUTES = ["/"];
 
 export const protectedRoute = (path: string) =>
-  PROTECTED_ROUTES.some(route =>
-    route.endsWith('/*')
+  PROTECTED_ROUTES.some((route) =>
+    route.endsWith("/*")
       ? path.startsWith(route.slice(0, -2))
-      : path === route || path.startsWith(route + '/')
-  )
+      : path === route || path.startsWith(route + "/")
+  );
 
 export const querySession = query(async (path: string) => {
-  'use server'
-  const { data: session } = await getSession()
-  if (session.wallets?.length) return session
-  if (protectedRoute(path)) throw redirect('/about?login=true&redirect=' + path)
-}, 'querySession')
+  "use server";
+  const { data: session } = await getSession();
+  if (session.wallets?.length) return session;
+  if (protectedRoute(path))
+    throw redirect("/about?login=true&redirect=" + path);
+}, "querySession");
 
 export const signOutAction = action(async () => {
-  'use server'
-  const session = await getSession()
-  await session.update({ wallets: undefined })
-  throw redirect('/about', { revalidate: querySession.key })
-})
+  "use server";
+  const session = await getSession();
+  await session.update({ wallets: undefined });
+  throw redirect("/about", { revalidate: querySession.key });
+});
 
 export default function useAuth() {
-  const ctx = useContext(context)
-  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
-  return ctx
+  const ctx = useContext(context);
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+  return ctx;
 }

examples/with-solidstart/src/auth/server.ts

@@ -1,22 +1,22 @@
-import { redirect } from '@solidjs/router'
-import { useSession } from 'vinxi/http'
+import { redirect } from "@solidjs/router";
+import { useSession } from "vinxi/http";
 
 export interface Session {
-  id: number | undefined
-  wallets: string[] | undefined
+  id: number | undefined;
+  wallets: string[] | undefined;
 }
 
 export const getSession = () =>
-  useSession<Session>({ password: process.env.SESSION_SECRET! })
+  useSession<Session>({ password: process.env.SESSION_SECRET! });
 
 export const updateSession = async (wallets: string[], id?: number) => {
-  const session = await getSession()
+  const session = await getSession();
   const { data } = await session.update(() => ({
     id: id || session.data.id,
     wallets
-  }))
-  return data as Session
-}
+  }));
+  return data as Session;
+};
 
 export const safeRedirect = (url?: string) =>
-  redirect(url?.startsWith('/') && !url.startsWith('//') ? url : '/')
+  redirect(url?.startsWith("/") && !url.startsWith("//") ? url : "/");