Merge pull request #6 from gabrieldemian/tests

Tests

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/react/_meta.zh-CN.json

@@ -8,8 +8,7 @@
     "display": "hidden"
   },
   "typescript": {
-    "title": "TypeScript",
-    "display": "hidden"
+    "title": "TypeScript"
   },
   "client": {
     "title": "Client",

docs/pages/react/typescript.zh-CN.mdx

@@ -0,0 +1,168 @@
+---
+title: 'TypeScript'
+description: '为合约交互、EIP-712类型化数据等提供完全的端到端类型安全！'
+---
+
+import { Callout } from 'nextra-theme-docs'
+
+# TypeScript
+
+wagmi 被设计成尽可能的类型安全! 需要记住的事情:
+
+- 目前需要使用 TypeScript v4.7.4 或更高版本。
+- 在这个资源库中对类型的修改被认为是非破坏性的，通常作为补丁 semver 的修改发布（否则每一个类型的增强都将是一个主要版本！）。
+- 强烈建议你将 `wagmi` 包的版本锁定在特定的补丁版本上，以便在任何版本上都可以修复或升级类型。
+- wagmi 的非类型相关公共 API 仍然非常严格地遵循 semver 规范。
+
+为确保一切正常，请确保将 `tsconfig.json` 中的 [`strict`](https://www.typescriptlang.org/tsconfig#strict) 设置为 true：
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "strict": true
+  }
+}
+```
+
+## 类型推断
+
+wagmi 可以根据 [ABI](https://docs.soliditylang.org/en/v0.8.15/abi-spec.html#json) 和 [EIP-712](https://eips.ethereum.org/EIPS/eip-712) 类型数据定义（由 [ABIType](https://github.com/wagmi-dev/abitype) 提供）来推断类型，为你提供从合约到前端完整的端到端类型安全和难以置信的开发者体验（例如，自动完成 ABI 函数名称并捕捉拼写错误、推断 ABI 函数参数类型等等）。
+
+为此，你必须将 [const 断言](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions) 添加到特定的配置参数中（关于这些参数的更多信息见下文），或者在行内定义它们。例如，`useContractRead` 的 `abi` 配置参数：
+
+```ts
+const { data } = useContractRead({
+  abi: […], // <--- 内联定义
+})
+```
+
+```ts
+const abi = […] as const // <--- const 断言
+const { data } = useContractRead({ abi })
+```
+
+如果类型推断不生效，很可能是你忘记了添加 `const` 断言或内联定义配置参数。
+
+<Callout type="info">
+  不幸的是 [TypeScript 不支持将 JSON 导入为
+  const](https://github.com/microsoft/TypeScript/issues/32063)。请查看
+  [ `@wagmi/cli`](/cli) 来帮助解决这个问题! 它可以自动从 Etherscan 中获取 ABI，从你的 Foundry/Hardhat 项目中解析 ABI、生成 React
+  Hooks 等等。
+</Callout>
+
+### 合约 ABIs
+
+当你向 `abi` 添加 const 断言时，以下 hooks 支持类型推断。
+
+- [useContract](/react/hooks/useContract)
+- [useContractEvent](/react/hooks/useContractEvent)
+- [useContractRead](/react/hooks/useContractRead)
+- [useContractReads](/react/hooks/useContractReads)
+- [useContractWrite](/react/hooks/useContractWrite)
+- [usePrepareContractWrite](/react/prepare-hooks/usePrepareContractWrite)
+- [useContractInfiniteReads](/react/hooks/useContractInfiniteReads) (还必须给 `args` 添加 const 断言，因为 `abi` 是在返回类型中)
+
+例如 `useContractRead`:
+
+```ts
+import { useContractRead } from 'wagmi'
+
+const { data } = useContractRead({
+  //    ^? const data: BigNumber | undefined
+  address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
+  abi: [
+    {
+      name: 'getUncleanliness',
+      inputs: [],
+      outputs: [{ name: '', type: 'uint256' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      name: 'love',
+      inputs: [{ name: '', type: 'address' }],
+      outputs: [{ name: '', type: 'uint256' }],
+      stateMutability: 'view',
+      type: 'function',
+    },
+    {
+      name: 'play',
+      inputs: [],
+      outputs: [],
+      stateMutability: 'nonpayable',
+      type: 'function',
+    },
+  ],
+
+  functionName: 'love',
+  // ^? (property) functionName?: "getUncleanliness" | "love" | undefined
+  // 需要注意 "play" 没有被包括在内，因为它不是一个 "read" 的函数
+
+  args: ['0x27a69ffba1e939ddcfecc8c7e0f967b872bac65c'],
+  // ^? (property) args?: readonly [`0x${string}`] | undefined
+
+  onSuccess(data) {
+    //      ^? (parameter) data: BigNumber
+  },
+  // 类型推断也将流向其他配置参数:
+  // - select?: ((data: BigNumber) => BigNumber) | undefined
+  // - onSettled?: ((data: BigNumber | undefined, error: Error | null) => void) | undefined
+  // - …
+})
+```
+
+### EIP-712 类型数据
+
+在 `types` 中添加一个 const 断言，为 `useSignTypedData` 的 `value` 配置参数添加类型推断。
+
+```ts
+import { useSignTypedData } from 'wagmi'
+
+const result = useSignTypedData({
+  domain: {
+    name: 'Ether Mail',
+    version: '1',
+    chainId: 1,
+    verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
+  },
+
+  types: {
+    Person: [
+      { name: 'name', type: 'string' },
+      { name: 'wallet', type: 'address' },
+    ],
+    Mail: [
+      { name: 'from', type: 'Person' },
+      { name: 'to', type: 'Person' },
+      { name: 'contents', type: 'string' },
+    ],
+  },
+
+  value: {
+    // ^? (parameter) value?: { name: string; wallet: `0x${string}` } | {
+    //     from: {
+    //         name: string;
+    //         wallet: `0x${string}`;
+    //     };
+    //     to: {
+    //         name: string;
+    //         wallet: `0x${string}`;
+    //     };
+    //     contents: string;
+    // } | undefined
+    from: {
+      name: 'Cow',
+      wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+    },
+    to: {
+      name: 'Bob',
+      wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+    },
+    contents: 'Hello, Bob!',
+  },
+})
+```
+
+## 配置内部类型
+
+对于高级使用情况，你可能想配置 wagmi 的内部类型。大多数与 ABI 和 EIP-712 类型数据相关的 wagmi 类型是由 [ABIType](https://github.com/wagmi-dev/abitype) 提供的。关于如何配置类型的更多信息，请参阅 ABIType 的 [文档](https://github.com/wagmi-dev/abitype#configuration)。

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"
+}