|
1 | | -[](https://github.com/solidjs/solid-start) |
| 1 | +[](https://web3onboard.thirdweb.com) |
2 | 2 |
|
3 | | -Launch your DeFi app with this starter template, featuring [SolidStart](https://start.solidjs.com) with server-side rendering capabilities and [Web3Onboard](https://web3onboard.thirdweb.com) for seamless Web3 integration with [ethers.js](https://github.com/ethers-io/ethers.js). |
| 3 | +# SolidStart Example |
| 4 | + |
| 5 | +Everything you need to integrate Web3Onboard in [SolidStart](https://start.solidjs.com) |
4 | 6 |
|
5 | 7 | ## Features |
6 | 8 |
|
7 | | -- **SSR Compliant**: Web3 code loads only on the client, ensuring compatibility with SSR architecture |
| 9 | +- **SSR Compliant**: Web3 code loads only on the client |
8 | 10 | - **Auth Context**: A reactive context to monitor wallet changes, handle signatures, and more |
9 | 11 | - **Database**: Includes `unstorage`, a lightweight file-based DB |
10 | 12 | - **Client-Only**: Easily isolate client-side logic for Web3 interactions |
@@ -35,18 +37,18 @@ For more details, refer to SolidStart's [README.md](https://github.com/solidjs/s |
35 | 37 |
|
36 | 38 | ## Usage |
37 | 39 |
|
38 | | -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: |
| 40 | +To ensure Web3-related logic runs only on the client, use the `clientOnly` utility from SolidStart. |
| 41 | +Here are two ways to implement client-only code: |
39 | 42 |
|
40 | | -1. **Client-Only Component** (e.g. for a component showing user balance) |
| 43 | +1. **In Component** (e.g. for a component showing eth balance) |
41 | 44 |
|
42 | 45 | ```jsx |
43 | 46 | import { clientOnly } from "@solidjs/start/client"; |
44 | 47 |
|
45 | 48 | const ClientComponent = clientOnly(() => import("./ClientOnlyComponent")); |
46 | 49 | ``` |
47 | 50 |
|
48 | | -2. **Client-Only Page** (e.g. for a `/swap` page) |
49 | | - Add the following at the top of your route file to render the entire page on the client: |
| 51 | +2. **In Routes** (e.g. for a `/swap` page) |
50 | 52 |
|
51 | 53 | ```jsx |
52 | 54 | import { clientOnly } from "@solidjs/start/client"; |
|
0 commit comments