feat(solid): Implement solid playground and core hooks

.changeset/config.json

@@ -8,5 +8,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
-  "ignore": ["docs", "example-dev"]
+  "ignore": ["docs", "example-dev", "example-dev-solid"]
 }

docs/next.config.mjs

@@ -14,7 +14,7 @@ const withNextra = nextra({
 /** @type {import('next').NextConfig} */
 const config = {
   i18n: {
-    locales: ['en-US','zh-CN'],
+    locales: ['en-US', 'zh-CN'],
     defaultLocale: 'en-US',
   },
   reactStrictMode: true,
@@ -42,6 +42,11 @@ const config = {
         destination: '/react/getting-started',
         permanent: true,
       },
+      {
+        source: '/solid',
+        destination: '/solid/getting-started',
+        permanent: true,
+      },
       {
         source: '/core',
         destination: '/core/getting-started',

docs/pages/_meta.en-US.json

@@ -8,6 +8,10 @@
     "title": "React",
     "type": "page"
   },
+  "solid": {
+    "title": "Solid",
+    "type": "page"
+  },
   "core": {
     "title": "Core",
     "type": "page"

docs/pages/_meta.zh-CN.json

@@ -8,6 +8,10 @@
     "title": "React",
     "type": "page"
   },
+  "solid": {
+    "title": "Solid",
+    "type": "page"
+  },
   "core": {
     "title": "Core",
     "type": "page",

docs/pages/solid/_meta.en-US.json

@@ -0,0 +1,4 @@
+{
+  "getting-started": "Getting Started",
+  "hooks": "Hooks"
+}

docs/pages/solid/getting-started.en-US.mdx

@@ -0,0 +1,129 @@
+---
+title: 'Getting Started'
+description: 'Get started building with wagmi!'
+---
+
+import { Callout, Tabs, Tab } from 'nextra-theme-docs'
+
+# Getting Started
+
+## Overview
+
+The setup and use of the Solid hooks are very similar to the React package, but there are some differences:
+- ❌ do NOT destructure proxies and signals (most of the return objects from the hooks are), you will [lose reactivity](https://dev.to/ryansolid/answering-common-questions-about-solidjs-23ea).
+- Import modules from `@wagmi/solid` instead of from `wagmi`.
+- Most of the hooks props are reactive, you can pass in a signal, or a function that return the value, if you don't need it to be reactive.
+
+## Manual setup
+
+### Installation
+
+Install wagmi and its ethers peer dependency.
+
+{/* prettier-ignore-start */}
+<Tabs items={['npm', 'pnpm', 'yarn']}>
+  <Tab>
+```bash
+npm i @wagmi/solid ethers@^5
+```
+  </Tab>
+  <Tab>
+```bash
+pnpm i @wagmi/solid ethers@^5
+```
+  </Tab>
+  <Tab>
+```bash
+yarn add @wagmi/solid ethers@^5
+```
+  </Tab>
+</Tabs>
+{/* prettier-ignore-end */}
+
+### Configure chains
+
+First, configure your desired chains to be used by wagmi, and the providers you want to use.
+
+```tsx
+import { configureChains, mainnet, publicProvider } from '@wagmi/solid'
+
+const { chains, provider, webSocketProvider } = configureChains(
+  [mainnet],
+  [publicProvider()],
+)
+```
+
+This example uses the Ethereum Mainnet chain (`mainnet`) from `wagmi`, however, you can also pass in any [EVM-compatible chain](/solid/chains).
+
+Note: In a production app, it is not recommended to only pass `publicProvider` to `configureChains` as you will probably face rate-limiting on the public provider endpoints. It is recommended to also pass an [`alchemyProvider`](/react/providers/alchemy) or [`infuraProvider`](/react/providers/infura) as well.
+
+[Read more about configuring chains](/solid/providers/configuring-chains)
+
+### Create a wagmi client
+
+Next, create a wagmi `Client` instance using [`createClient`](/solid/client), and pass the result from `configureChains` to it.
+
+```tsx {9-13}
+import { WagmiConfig, createClient, configureChains, mainnet, publicProvider } from '@wagmi/solid'
+
+const { chains, provider, webSocketProvider } = configureChains(
+  [mainnet],
+  [publicProvider()],
+)
+
+const client = createClient({
+  autoConnect: true,
+  provider,
+  webSocketProvider,
+})
+```
+
+[Read more about client configuration](/solid/client)
+
+### Wrap app with `WagmiConfig`
+
+Finally, wrap your app with the [`WagmiConfig`](/solid/WagmiConfig) component, passing `client` to it.
+
+```tsx {9-11}
+const client = createClient({
+  autoConnect: true,
+  provider,
+  webSocketProvider,
+})
+
+function App() {
+  return (
+    <WagmiConfig client={client}>
+      <YourRoutes />
+    </WagmiConfig>
+  )
+}
+```
+
+### You're good to go!
+
+Use hooks! Every component inside the `WagmiConfig` is now set up to use the wagmi hooks.
+
+```tsx {5,6,7-11}
+import { useAccount, useConnect, useEnsName, InjectedConnector } from '@wagmi/solid'
+import { createSignal } from 'solid-js'
+
+function Profile() {
+  const [chainId, setChainId] = createSignal(1)
+  const accData = useAccount()
+
+  const { connect } = useConnect({
+    chainId
+    // chainId: () => 1
+  })
+
+  return (
+    <>
+      <button onClick={() => setChainId(5)}>Change chainId to 5</button>
+      <button onClick={() => connect()}>Connect Wallet</button>
+    </>
+  )
+}
+```
+
+Want to learn more? Check out the [examples](/examples/connect-wallet) to learn how to use wagmi in real-world scenarios or continue on reading the documentation.

docs/pages/solid/hooks/_meta.en-US.json

@@ -0,0 +1,13 @@
+{
+  "useAccount": "useAccount",
+  "useBalance": "useBalance",
+  "useConnect": "useConnect",
+  "useContract": "useContract",
+  "useDisconnect": "useDisconnect",
+  "useNetwork": "useNetwork",
+  "useProvider": "useProvider",
+  "useSigner": "useSigner",
+  "useSignMessage": "useSignMessage",
+  "useSwitchNetwork": "useSwitchNetwork",
+  "useWebSocketProvider": "useWebSocketProvider"
+}

docs/pages/solid/hooks/useAccount.en-US.mdx

@@ -0,0 +1,78 @@
+---
+title: 'useAccount'
+description: 'React Hook for accessing account data and connection status.'
+---
+
+# useAccount
+
+Solid hook for accessing account data and connection status.
+
+```ts
+import { useAccount } from '@wagmi/solid'
+```
+
+## Usage
+
+```tsx
+import { useAccount } from '@wagmi/solid'
+
+function App() {
+  // do not destructure this object,
+  // it will lose reactivity if you do.
+  const accData = useAccount()
+
+  if (accData().isConnecting) return <div>Connecting…</div>
+  if (accData().isDisconnected) return <div>Disconnected</div>
+  return <div>{accData().address}</div>
+}
+```
+
+## Return Value
+
+```ts
+Accessor<{
+  address?: string
+  connector?: Connector
+  isConnecting: boolean
+  isReconnecting: boolean
+  isConnected: boolean
+  isDisconnected: boolean
+  status: 'connecting' | 'reconnecting' | 'connected' | 'disconnected'
+}>
+```
+
+## Configuration
+
+### onConnect (optional)
+
+Function to invoke when account connects.
+
+It provides the connected address & connector, as well as a `isReconnected` flag for if the user reconnected via `autoConnect`.
+
+```tsx {5-7}
+import { useAccount } from '@wagmi/solid'
+
+function App() {
+  const account = useAccount({
+    onConnect({ address, connector, isReconnected }) {
+      console.log('Connected', { address, connector, isReconnected })
+    },
+  })
+}
+```
+
+### onDisconnect (optional)
+
+Function to invoke when account disconnects.
+
+```tsx {5-7}
+import { useAccount } from '@wagmi/solid'
+
+function App() {
+  const account = useAccount({
+    onDisconnect() {
+      console.log('Disconnected')
+    },
+  })
+}
+```