Add SolidStart example #2387
Add SolidStart example #2387
Conversation
WalkthroughAdds a new SolidStart example "with-solidstart" implementing Web3 wallet onboarding, session-backed auth (server actions), simple filesystem persistence, UI components and routes, Tailwind/Vite setup, TypeScript config, and documentation including Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant B as Browser
participant AP as AuthProvider (client)
participant W as Wallet
participant S as Server
participant DB as Database
U->>B: Click "Connect Wallet"
B->>AP: set login query param / trigger auth flow
AP->>W: request connect & sign challenge
W-->>B: address + signature
B->>S: authWalletAction(address, redirect?)
S->>DB: getUserFromWallet(address)
alt existing user
DB-->>S: user
else new user
S->>DB: createUserFromWallet(address)
DB-->>S: new user
end
S->>S: updateSession(wallets, userId)
S-->>B: redirect + session cookie
B->>AP: querySession() revalidate
AP-->>B: authenticated state
sequenceDiagram
participant U as User
participant B as Browser
participant AP as AuthProvider (client)
participant W as Wallet
participant S as Server
U->>B: Click "Disconnect"
B->>AP: logout()
AP->>W: disconnect wallet
AP->>S: signOutAction()
S->>S: clear session.wallets
S-->>B: redirect to /about
B->>AP: querySession() revalidate
AP-->>B: signed-out state
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-11-01T16:25:13.776ZApplied to files:
🪛 markdownlint-cli2 (0.18.1)examples/with-solidstart/README.md62-62: Images should have alternate text (alt text) (MD045, no-alt-text) 🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
thomasbuilds
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Nitpick comments (2)
examples/with-solidstart/.env.example (1)
2-2: Consider using a more obviously placeholder value or an actual generated example.The current placeholder might tempt users to leave it unchanged. Consider either using an obviously fake value like
your-secret-here-change-meor including an actual generated example that demonstrates the expected format.Example diff:
# Generate using `openssl rand -hex 32` -SESSION_SECRET=myverylongsessionsecretkeythatishouldchange +SESSION_SECRET=your-secret-here-change-meOr provide an actual generated example:
# Generate using `openssl rand -hex 32` -SESSION_SECRET=myverylongsessionsecretkeythatishouldchange +SESSION_SECRET=a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2examples/with-solidstart/src/entry-server.tsx (1)
15-18: Consider noscript styling fallback.The
noscriptelement uses Tailwind utility classes, which won't be applied if JavaScript is disabled and CSS fails to load. Consider adding inline styles as a fallback to ensure the message is properly displayed.Apply this diff to add inline fallback styles:
- <noscript class="flex flex-col justify-center items-center h-screen px-8 text-center gap-2 select-none"> + <noscript class="flex flex-col justify-center items-center h-screen px-8 text-center gap-2 select-none" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 0 2rem; text-align: center; gap: 0.5rem;"> <h1 class="text-2xl font-medium">JavaScript Disabled</h1> <p class="text-gray-500">Please enable it and refresh the page</p> </noscript>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
examples/with-solidstart/public/favicon.svgis excluded by!**/*.svgexamples/with-solidstart/public/logo.svgis excluded by!**/*.svgexamples/with-solidstart/public/onboard.svgis excluded by!**/*.svg
📒 Files selected for processing (27)
examples/with-solidstart/.env.example(1 hunks)examples/with-solidstart/.gitignore(1 hunks)examples/with-solidstart/README.md(1 hunks)examples/with-solidstart/app.config.ts(1 hunks)examples/with-solidstart/package.json(1 hunks)examples/with-solidstart/src/app.css(1 hunks)examples/with-solidstart/src/app.tsx(1 hunks)examples/with-solidstart/src/auth/Provider.tsx(1 hunks)examples/with-solidstart/src/auth/context.ts(1 hunks)examples/with-solidstart/src/auth/index.ts(1 hunks)examples/with-solidstart/src/auth/server.ts(1 hunks)examples/with-solidstart/src/auth/web3.ts(1 hunks)examples/with-solidstart/src/components/Balance.tsx(1 hunks)examples/with-solidstart/src/components/Error.tsx(1 hunks)examples/with-solidstart/src/components/Icons.tsx(1 hunks)examples/with-solidstart/src/components/Nav.tsx(1 hunks)examples/with-solidstart/src/db/index.ts(1 hunks)examples/with-solidstart/src/db/schema.ts(1 hunks)examples/with-solidstart/src/entry-client.tsx(1 hunks)examples/with-solidstart/src/entry-server.tsx(1 hunks)examples/with-solidstart/src/global.d.ts(1 hunks)examples/with-solidstart/src/routes/[...404].tsx(1 hunks)examples/with-solidstart/src/routes/about.tsx(1 hunks)examples/with-solidstart/src/routes/index.tsx(1 hunks)examples/with-solidstart/src/web3/index.ts(1 hunks)examples/with-solidstart/src/web3/utils.ts(1 hunks)examples/with-solidstart/tsconfig.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (12)
examples/with-solidstart/src/app.tsx (4)
examples/with-solidstart/src/auth/index.ts (1)
querySession(15-21)examples/with-solidstart/src/auth/Provider.tsx (1)
AuthProvider(14-100)examples/with-solidstart/src/components/Nav.tsx (1)
Nav(10-104)examples/with-solidstart/src/components/Error.tsx (1)
ErrorNotification(5-36)
examples/with-solidstart/src/components/Nav.tsx (4)
examples/with-solidstart/src/components/Balance.tsx (1)
Balance(5-19)examples/with-solidstart/src/auth/index.ts (1)
useAuth(30-34)examples/with-solidstart/src/components/Icons.tsx (2)
Wallet(24-28)Logout(18-22)examples/with-solidstart/src/web3/utils.ts (1)
shortenAddress(1-2)
examples/with-solidstart/src/components/Balance.tsx (2)
examples/with-solidstart/src/auth/index.ts (1)
useAuth(30-34)examples/with-solidstart/src/web3/utils.ts (1)
formatBalance(4-12)
examples/with-solidstart/src/auth/Provider.tsx (3)
examples/with-solidstart/src/auth/index.ts (2)
querySession(15-21)signOutAction(23-28)examples/with-solidstart/src/auth/web3.ts (3)
authWalletAction(24-39)addWalletAction(41-48)sign(12-22)examples/with-solidstart/src/web3/index.ts (3)
useWeb3Onboard(37-57)BASE_ID(13-13)load(23-33)
examples/with-solidstart/src/routes/index.tsx (1)
examples/with-solidstart/src/auth/index.ts (1)
useAuth(30-34)
examples/with-solidstart/src/auth/index.ts (2)
examples/with-solidstart/src/app.tsx (1)
route(11-13)examples/with-solidstart/src/auth/server.ts (1)
getSession(9-19)
examples/with-solidstart/src/db/schema.ts (1)
examples/with-solidstart/src/db/index.ts (1)
User(50-50)
examples/with-solidstart/src/auth/context.ts (2)
examples/with-solidstart/src/auth/server.ts (1)
Session(4-7)examples/with-solidstart/src/web3/index.ts (1)
Web3(35-35)
examples/with-solidstart/src/db/index.ts (1)
examples/with-solidstart/src/db/schema.ts (1)
User(1-6)
examples/with-solidstart/src/auth/web3.ts (3)
examples/with-solidstart/src/auth/server.ts (3)
getSession(9-19)updateSession(21-28)safeRedirect(30-31)examples/with-solidstart/src/db/schema.ts (1)
User(1-6)examples/with-solidstart/src/web3/utils.ts (1)
placeFirst(14-21)
examples/with-solidstart/src/components/Error.tsx (1)
examples/with-solidstart/src/components/Icons.tsx (1)
X(3-16)
examples/with-solidstart/src/web3/index.ts (1)
packages/core/src/store/index.ts (1)
state(291-294)
🪛 Biome (2.1.2)
examples/with-solidstart/src/auth/Provider.tsx
[error] 91-91: Unsafe usage of 'return'.
'return' in 'finally' overwrites the control flow statements inside 'try' and 'catch'.
(lint/correctness/noUnsafeFinally)
🪛 dotenv-linter (4.0.0)
examples/with-solidstart/.env.example
[warning] 2-2: [SpaceCharacter] The line has spaces around equal sign
(SpaceCharacter)
🪛 markdownlint-cli2 (0.18.1)
examples/with-solidstart/README.md
62-62: Images should have alternate text (alt text)
(MD045, no-alt-text)
🔇 Additional comments (13)
examples/with-solidstart/.gitignore (1)
1-5: LGTM!The gitignore entries are appropriate for a SolidStart project, covering common build artifacts, dependencies, and environment files.
examples/with-solidstart/src/entry-client.tsx (1)
1-3: LGTM!This is the standard SolidStart client entry point. The non-null assertion on the DOM element is appropriate as the
appelement is required for mounting.examples/with-solidstart/src/db/schema.ts (1)
1-6: LGTM!The User interface is well-defined with appropriate types. Good use of nullable
updatedAtto track updates while allowing for initial creation without an update timestamp.examples/with-solidstart/src/global.d.ts (1)
1-1: LGTM!The triple-slash reference directive correctly includes SolidStart environment type definitions.
examples/with-solidstart/tsconfig.json (1)
1-19: LGTM!The TypeScript configuration is appropriate for a SolidStart project with proper JSX handling, path aliases, and type definitions.
examples/with-solidstart/src/routes/[...404].tsx (1)
3-17: LGTM!The 404 component is clean and functional. Optionally, you could wrap the message text (line 8) in a
<p>tag for better semantic HTML, but the current implementation works fine.examples/with-solidstart/src/app.css (1)
1-25: LGTM!The CSS setup is well-structured with appropriate use of Tailwind directives. The
@media (scripting: none)fallback on line 6-8 correctly hides the app when JavaScript is disabled, complementing the noscript message in the server entry.examples/with-solidstart/src/components/Icons.tsx (1)
1-28: LGTM!The icon components are cleanly implemented with appropriate prop handling for styling. The SVG paths are well-defined and the components follow a consistent pattern.
examples/with-solidstart/app.config.ts (1)
1-7: LGTM!The configuration is appropriately minimal for an example template. The empty
presetstring with the comment clearly indicates where developers should specify their deployment target (e.g., "node-server", "vercel", "netlify").examples/with-solidstart/src/components/Balance.tsx (1)
1-19: LGTM!The Balance component is well-implemented with appropriate use of Suspense for async data loading. The skeleton fallback provides good UX while the balance loads, and the dimensions match the final content.
examples/with-solidstart/src/app.tsx (2)
11-13: LGTM!The route preload function correctly fetches session data before rendering, which is essential for SSR and ensures authenticated state is available early in the render cycle.
15-33: LGTM!The App component is well-structured with proper provider nesting. The layout places navigation, dynamic content, and error notifications in a logical hierarchy, ensuring global state and error handling are consistently available throughout the application.
examples/with-solidstart/package.json (1)
25-27: Verify the actual minimum Node.js requirement for @solidjs/start before adjusting the engines field.The original review comment suggests lowering the Node.js requirement from >=22 to >=18 or >=20. However, findings show conflicting information:
- SolidStart's official repository pins Node.js 22.19.0 in .nvmrc and instructs to use that version
- A separate source indicates @solidjs/start supports Node 18+
The example project currently specifies
engines: { "node": ">=22" }, which aligns with the upstream SolidStart repository's own requirement. However, without definitive verification of @solidjs/start's actual npm package engines field, it cannot be conclusively determined whether this is unnecessarily restrictive or intentionally aligned with upstream requirements.Recommended action: Check the @solidjs/start package.json engines field on npm registry or test the example with Node 18/20 to confirm compatibility before adjusting this requirement.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Signed-off-by: Thomas <[email protected]>
Signed-off-by: Thomas <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
examples/with-solidstart/src/auth/Provider.tsx (1)
55-62: Guard againstconnectedChain()returning undefined.The previous review comment on this segment remains unaddressed.
onboard!.connectedChain()can returnundefinedwhen wallets briefly report no chains after connect, causing the.idaccess on line 58 to throw.Apply the previously suggested fix:
- 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, + async ({ provider }) => { + if (!onboard) return load(provider); + const chain = onboard.connectedChain(); + if (!chain || chain.id !== BASE_ID) { + await onboard.setChain({ chainId: BASE_ID }); + } + return load(provider); + } + );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
examples/with-solidstart/src/auth/Provider.tsx(1 hunks)examples/with-solidstart/src/routes/about.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/with-solidstart/src/routes/about.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
📚 Learning: 2025-11-01T16:25:13.748Z
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
Applied to files:
examples/with-solidstart/src/auth/Provider.tsx
🧬 Code graph analysis (1)
examples/with-solidstart/src/auth/Provider.tsx (3)
examples/with-solidstart/src/auth/index.ts (2)
querySession(15-21)signOutAction(23-28)examples/with-solidstart/src/auth/web3.ts (3)
authWalletAction(24-39)addWalletAction(41-48)sign(12-22)examples/with-solidstart/src/web3/index.ts (3)
useWeb3Onboard(37-57)BASE_ID(13-13)load(23-33)
🪛 Biome (2.1.2)
examples/with-solidstart/src/auth/Provider.tsx
[error] 98-102: Illegal return statement outside of a function
(parse)
[error] 102-103: Expected a statement but instead found '}'.
Expected a statement here.
(parse)
🔇 Additional comments (2)
examples/with-solidstart/src/auth/Provider.tsx (2)
37-53: LGTM! SSR protection correctly implemented.The login resource now properly gates on
onboardexisting in the source predicate, preventing SSR crashes. The fetcher receives the guaranteed non-null instance, addressing the previous concern.
86-95: LGTM! Logout safety improved.The logout function now correctly guards the wallet lookup before attempting to disconnect, and properly awaits
signOut()in the finally block without usingreturn. This addresses the previous review concerns.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Signed-off-by: Thomas <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
examples/with-solidstart/src/auth/server.ts (1)
9-10: Verify session cookie configuration for local development.A previous review raised concerns about
secure: truecookie settings preventing session cookies from working over HTTP during local development. Verify whetheruseSessionfromvinxi/httpdefaults to secure cookies and, if so, whether the configuration can be made environment-aware.Check the vinxi/http documentation for useSession cookie defaults:
Does vinxi/http useSession set secure: true by default for cookies?examples/with-solidstart/README.md (1)
62-62: Add alt text for the logo image.The logo image is missing an
altattribute, which is necessary for screen readers and accessibility compliance (WCAG).Apply this diff:
- <img src="public/logo.svg" width="300px"> + <img src="public/logo.svg" width="300px" alt="Web3Onboard logo">
🧹 Nitpick comments (4)
examples/with-solidstart/src/routes/[...404].tsx (1)
8-8: Wrap the text in a paragraph element.The error message is a bare text node. Wrapping it in a
<p>element improves semantic HTML structure.Apply this diff:
- Sorry, the page you're looking for doesn't exist + <p>Sorry, the page you're looking for doesn't exist</p>examples/with-solidstart/src/components/Icons.tsx (1)
3-28: Consider adding ARIA attributes for improved accessibility.The icon components lack accessibility attributes. Adding
role="img"and descriptivearia-labelattributes (oraria-hidden="true"if the icons are purely decorative with adjacent text labels) would improve screen reader support.Example for the X icon:
export const X = (props: Icon) => ( <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={props.class} + role="img" + aria-label="Close" > <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> )examples/with-solidstart/src/auth/index.ts (1)
19-19: Encode the redirect URL parameter.The
pathis concatenated directly into the redirect URL without encoding. If the path contains special characters, this could cause issues. UseencodeURIComponentto safely encode the redirect parameter.Apply this diff:
- if (protectedRoute(path)) throw redirect('/about?login=true&redirect=' + path) + if (protectedRoute(path)) throw redirect('/about?login=true&redirect=' + encodeURIComponent(path))You'll also need to decode it when reading the parameter on the
/aboutpage.examples/with-solidstart/src/auth/server.ts (1)
9-10: Add explicit runtime validation for SESSION_SECRET.Documentation for
SESSION_SECRETalready exists in.env.exampleand the README (withopenssl rand -hex 32command). However, the code only relies on TypeScript's non-null assertion (!), which doesn't prevent undefined at runtime since it's stripped during compilation. Add explicit validation at server startup—for example:if (!process.env.SESSION_SECRET) { throw new Error('SESSION_SECRET environment variable is not set') }This ensures developers get a clear error message immediately if the variable is missing, rather than a cryptic failure when
useSessiontries to use an undefined password.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
examples/with-solidstart/.env.example(1 hunks)examples/with-solidstart/README.md(1 hunks)examples/with-solidstart/app.config.ts(1 hunks)examples/with-solidstart/package.json(1 hunks)examples/with-solidstart/src/app.css(1 hunks)examples/with-solidstart/src/app.tsx(1 hunks)examples/with-solidstart/src/auth/Provider.tsx(1 hunks)examples/with-solidstart/src/auth/context.ts(1 hunks)examples/with-solidstart/src/auth/index.ts(1 hunks)examples/with-solidstart/src/auth/server.ts(1 hunks)examples/with-solidstart/src/auth/web3.ts(1 hunks)examples/with-solidstart/src/components/Balance.tsx(1 hunks)examples/with-solidstart/src/components/Error.tsx(1 hunks)examples/with-solidstart/src/components/Icons.tsx(1 hunks)examples/with-solidstart/src/components/Nav.tsx(1 hunks)examples/with-solidstart/src/db/index.ts(1 hunks)examples/with-solidstart/src/db/schema.ts(1 hunks)examples/with-solidstart/src/entry-client.tsx(1 hunks)examples/with-solidstart/src/entry-server.tsx(1 hunks)examples/with-solidstart/src/routes/[...404].tsx(1 hunks)examples/with-solidstart/src/routes/about.tsx(1 hunks)examples/with-solidstart/src/routes/index.tsx(1 hunks)examples/with-solidstart/src/web3/index.ts(1 hunks)examples/with-solidstart/src/web3/utils.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/with-solidstart/src/db/schema.ts
🚧 Files skipped from review as they are similar to previous changes (17)
- examples/with-solidstart/src/entry-client.tsx
- examples/with-solidstart/src/components/Nav.tsx
- examples/with-solidstart/.env.example
- examples/with-solidstart/src/auth/context.ts
- examples/with-solidstart/package.json
- examples/with-solidstart/app.config.ts
- examples/with-solidstart/src/auth/Provider.tsx
- examples/with-solidstart/src/web3/index.ts
- examples/with-solidstart/src/routes/index.tsx
- examples/with-solidstart/src/web3/utils.ts
- examples/with-solidstart/src/routes/about.tsx
- examples/with-solidstart/src/entry-server.tsx
- examples/with-solidstart/src/app.css
- examples/with-solidstart/src/auth/web3.ts
- examples/with-solidstart/src/components/Error.tsx
- examples/with-solidstart/src/app.tsx
- examples/with-solidstart/src/db/index.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
📚 Learning: 2025-11-01T16:25:13.748Z
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
Applied to files:
examples/with-solidstart/src/auth/server.tsexamples/with-solidstart/src/components/Icons.tsxexamples/with-solidstart/src/auth/index.ts
🧬 Code graph analysis (2)
examples/with-solidstart/src/auth/index.ts (2)
examples/with-solidstart/src/app.tsx (1)
route(11-13)examples/with-solidstart/src/auth/server.ts (1)
getSession(9-10)
examples/with-solidstart/src/components/Balance.tsx (2)
examples/with-solidstart/src/auth/index.ts (1)
useAuth(29-33)examples/with-solidstart/src/web3/utils.ts (1)
formatBalance(4-12)
🪛 markdownlint-cli2 (0.18.1)
examples/with-solidstart/README.md
62-62: Images should have alternate text (alt text)
(MD045, no-alt-text)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (1)
examples/with-solidstart/src/components/Balance.tsx (1)
5-19: LGTM!The Balance component properly handles async data loading with Suspense, uses optional chaining to prevent errors when web3 is not yet loaded, and provides a good user experience with the skeleton fallback.
thomasbuilds
changed the title
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (1)
examples/with-solidstart/README.md (1)
58-58: Add alt text and fix asset path.Two issues with this image tag:
- Missing alt text: The image lacks an
altattribute for accessibility (this was previously flagged).- Incorrect path: In Vite-based projects like SolidStart, assets in the
public/directory should be referenced without the "public/" prefix.Apply this diff to fix both issues:
- <img src="public/logo.png" width="350px"> + <img src="/logo.png" width="350px" alt="Web3Onboard logo">
🧹 Nitpick comments (1)
examples/with-solidstart/src/routes/index.tsx (1)
12-21: Consider memoizing the chain name computation.The
getChainNamefunction readsweb3()?.chain.idon each call, and line 42 calls bothgetChainName()andweb3()?.chain.idseparately, resulting in multiple reactive signal accesses. In SolidJS, each signal read triggers reactivity tracking, which can impact performance.Apply this diff to memoize the chain data:
+import { For, Suspense, createMemo } from "solid-js"; -import { For, Suspense } from "solid-js"; function Home() { const { session, web3 } = useAuth(); + const chain = createMemo(() => web3()?.chain); + const getChainName = () => { - switch (web3()?.chain.id) { + switch (chain()?.id) { case "0x1": return "Ethereum Mainnet"; case "0x2105": return "Base Mainnet"; default: return "Unknown"; } };Then update line 42:
- <Suspense fallback={<Fallback class="w-36 h-4" />}> - {getChainName()} - {web3()?.chain.id} - </Suspense> + <Suspense fallback={<Fallback class="w-36 h-4" />}> + {getChainName()} - {chain()?.id} + </Suspense>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
examples/with-solidstart/public/logo.pngis excluded by!**/*.png
📒 Files selected for processing (16)
examples/with-solidstart/README.md(1 hunks)examples/with-solidstart/src/app.css(1 hunks)examples/with-solidstart/src/auth/Provider.tsx(1 hunks)examples/with-solidstart/src/auth/index.ts(1 hunks)examples/with-solidstart/src/auth/server.ts(1 hunks)examples/with-solidstart/src/components/Balance.tsx(1 hunks)examples/with-solidstart/src/components/Error.tsx(1 hunks)examples/with-solidstart/src/components/Icons.tsx(1 hunks)examples/with-solidstart/src/components/Nav.tsx(1 hunks)examples/with-solidstart/src/entry-server.tsx(1 hunks)examples/with-solidstart/src/global.d.ts(1 hunks)examples/with-solidstart/src/routes/[...404].tsx(1 hunks)examples/with-solidstart/src/routes/about.tsx(1 hunks)examples/with-solidstart/src/routes/index.tsx(1 hunks)examples/with-solidstart/src/web3/index.ts(1 hunks)examples/with-solidstart/src/web3/utils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- examples/with-solidstart/src/components/Balance.tsx
- examples/with-solidstart/src/entry-server.tsx
- examples/with-solidstart/src/web3/utils.ts
- examples/with-solidstart/src/web3/index.ts
- examples/with-solidstart/src/auth/Provider.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
📚 Learning: 2025-11-01T16:25:13.748Z
Learnt from: thomasbuilds
Repo: thirdweb-dev/web3-onboard PR: 2387
File: examples/with-solidstart/src/auth/index.ts:23-27
Timestamp: 2025-11-01T16:25:13.748Z
Learning: In examples/with-solidstart/src/auth/index.ts, the signOutAction intentionally only clears the wallets field and preserves the session id. This design keeps the session id persistent across wallet disconnections as a feature.
Applied to files:
examples/with-solidstart/src/auth/index.tsexamples/with-solidstart/src/auth/server.tsexamples/with-solidstart/src/components/Icons.tsxexamples/with-solidstart/src/components/Nav.tsxexamples/with-solidstart/src/routes/index.tsxexamples/with-solidstart/README.md
🧬 Code graph analysis (4)
examples/with-solidstart/src/auth/index.ts (2)
examples/with-solidstart/src/app.tsx (1)
route(11-13)examples/with-solidstart/src/auth/server.ts (1)
getSession(9-10)
examples/with-solidstart/src/components/Error.tsx (1)
examples/with-solidstart/src/components/Icons.tsx (1)
X(9-22)
examples/with-solidstart/src/components/Nav.tsx (4)
examples/with-solidstart/src/components/Balance.tsx (1)
Balance(6-16)examples/with-solidstart/src/auth/index.ts (1)
useAuth(31-35)examples/with-solidstart/src/components/Icons.tsx (4)
Wallet(30-34)Arrow(36-40)Fallback(3-7)Logout(24-28)examples/with-solidstart/src/web3/utils.ts (1)
shortenAddress(1-2)
examples/with-solidstart/src/routes/index.tsx (2)
examples/with-solidstart/src/auth/index.ts (1)
useAuth(31-35)examples/with-solidstart/src/components/Icons.tsx (1)
Fallback(3-7)
🪛 markdownlint-cli2 (0.18.1)
examples/with-solidstart/README.md
58-58: Images should have alternate text (alt text)
(MD045, no-alt-text)
🔇 Additional comments (4)
examples/with-solidstart/src/global.d.ts (1)
1-7: LGTM! Clean TypeScript ambient declarations.The type declarations properly reference SolidStart types and augment the NodeJS namespace to provide type safety for the SESSION_SECRET environment variable. This aligns well with the documented setup in the README.
examples/with-solidstart/README.md (1)
1-55: Well-structured documentation with clear examples.The README provides comprehensive setup instructions and usage examples. The inclusion of the secure
SESSION_SECRETgeneration command usingopensslis a good security practice, and theclientOnlyusage patterns are clearly explained with practical examples.examples/with-solidstart/src/auth/index.ts (2)
16-22: LGTM! Good use of query primitive for session validation.The querySession function properly checks for authenticated wallets and redirects unauthenticated users away from protected routes with the target path preserved in the redirect parameter.
24-29: LGTM! Proper cache invalidation on sign out.The signOutAction correctly clears the wallets field, redirects to the fallback page, and revalidates the query cache. The preservation of the session id is intentional per the learning note.
Based on learnings.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Thomas <[email protected]>
Signed-off-by: Thomas <[email protected]>
Signed-off-by: Thomas <[email protected]>
|
All right all issues fixed! |
Signed-off-by: Thomas <[email protected]>
1 participant
Added fully functional SolidStart template with SSR support
More info on the readme.md of example
Summary by CodeRabbit
New Features
Documentation
Chores