docs: init guide and quick start doc (#128)

Co-authored-by: yutingzhao1991 <[email protected]>

docs/guide/adapter.md

@@ -0,0 +1,13 @@
+---
+nav: Guide
+group:
+  title: Advance
+  order: 2
+---
+
+# Develope Adapter
+
+<!-- prettier-ignore -->
+:::warning
+Waiting for writing...
+:::

docs/guide/adapter.zh-CN.md

@@ -0,0 +1,13 @@
+---
+nav: 指南
+group:
+  title: 高级
+  order: 2
+---
+
+# 开发适配器
+
+<!-- prettier-ignore -->
+:::warning
+Waiting for writing...
+:::

docs/guide/demos/guide.tsx

@@ -0,0 +1,38 @@
+import { createConfig, configureChains } from 'wagmi';
+import { mainnet, polygon } from 'wagmi/chains';
+import { publicProvider } from 'wagmi/providers/public';
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
+import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+import { ConnectButton, Connector } from '@ant-design/web3';
+
+const { publicClient, chains } = configureChains([mainnet, polygon], [publicProvider()]);
+
+const config = createConfig({
+  autoConnect: true,
+  publicClient,
+  connectors: [
+    new MetaMaskConnector({
+      chains,
+    }),
+    new WalletConnectConnector({
+      chains,
+      options: {
+        showQrModal: false,
+        projectId: YOUR_WALLET_CONNET_PROJECT_ID,
+      },
+    }),
+  ],
+});
+
+const App: React.FC = () => {
+  return (
+    <WagmiWeb3ConfigProvider chains={chains} config={config}>
+      <Connector>
+        <ConnectButton />
+      </Connector>
+    </WagmiWeb3ConfigProvider>
+  );
+};
+
+export default App;

docs/guide/demos/quick-start.tsx

@@ -0,0 +1,27 @@
+import { createConfig, configureChains, mainnet } from 'wagmi';
+import { infuraProvider } from 'wagmi/providers/infura';
+import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
+import { NFTImage } from '@ant-design/web3';
+
+const { publicClient } = configureChains(
+  [mainnet],
+  [
+    infuraProvider({
+      apiKey: YOUR_INFURA_API_KEY,
+    }),
+  ],
+);
+
+const config = createConfig({
+  publicClient,
+});
+
+const App: React.FC = () => {
+  return (
+    <WagmiWeb3ConfigProvider config={config}>
+      <NFTImage width={300} address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
+    </WagmiWeb3ConfigProvider>
+  );
+};
+
+export default App;

docs/guide/index.md

@@ -1,56 +1,10 @@
 ---
 nav: Guide
-group: Basic
 ---
 
-# Quick Start
+# Ant Design Web3
 
 <!-- prettier-ignore -->
 :::warning
-Ant Design Web3 is still in *ALPHA*, and we are continuously improving it. If you have any suggestions, please feel free to provide them to us through [Github Issue](https://github.com/ant-design/ant-design-web3/issues).
+Waiting for translation...
 :::
-
-## Install Dependencies
-
-You can install the necessary dependencies using package management tools such as `npm` or `pnpm`. Here's an example:
-
-```shell
-npm i @ant-design/web3 @ant-design/web3-ethereum --save
-```
-
-## Using UI Components
-
-`@ant-design/web3` is a pure UI component library that you can directly use. For example, you can use the `BrowserLink` component:
-
-```tsx | pure
-import { BrowserLink } from '@ant-design/web3';
-
-export default () => {
-  return <BrowserLink address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />;
-};
-```
-
-## Connecting to the Blockchain
-
-You can also connect certain UI components to the blockchain by importing the `EthereumProvider` from `@ant-design/web3-ethereum`. The following example demonstrates how to display an NFT image using the `NFTImage` component. In this example, you can request NFT data through the blockchain node service provided by [zan.top](https://zan.top/). All you need to do is pass the `address` and `tokenId` to the component.
-
-```tsx | pure
-import { EthereumProvider, createProvider, ZANJsonRpcProvider } from '@ant-design/web3-ethereum';
-import { NFTImage } from '@ant-design/web3';
-
-const provider = createProvider({
-  rpcs: [
-    new ZANJsonRpcProvider({
-      apiKey: 'd0eeefc2a4da4a8ba707889259b437d6',
-    }),
-  ],
-});
-
-export default () => {
-  return (
-    <EthereumProvider provider={provider}>
-      <NFTImage address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={42} />
-    </EthereumProvider>
-  );
-};
-```

docs/guide/index.zh-CN.md

@@ -1,56 +1,24 @@
 ---
-nav: 指南
-group: 基础
+nav: Guide
 ---
 
-# 快速开始
+# Ant Design Web3
 
 <!-- prettier-ignore -->
 :::warning
-Ant Design Web3 还在 *ALPHA* 中，我们正在不断完善，如有建议欢迎通过 [Github Issue](https://github.com/ant-design/ant-design-web3/issues) 给我们提建议。 
+Ant Design Web3 还在 *ALPHA* 中，我们正在不断完善，如有建议欢迎通过 [Github issues](https://github.com/ant-design/ant-design-web3/issues) 给我们提建议。 
 :::
 
-## 安装依赖
+Ant Design Web3 是一个基于 [Ant Design](https://ant.design/index-cn) 的 Web3 React 组件库，它提供了一系列的组件，可以帮助你快速构建去中心化应用（DApp）。
 
-你可以通过 `npm` 或者 `pnpm` 等包管理工具安装相关依赖，示例如下：
+你可以通过以下任意方式使用 Ant Design Web3：
 
-```shell
-npm i @ant-design/web3 @ant-design/web3-ethereum --save
-```
+- 仅仅通过 `@ant-design/web3` 直接使用 UI 组件，比如 `ConnectButton`、`Address` 等。连接区块链的部分你可以选择你喜欢的任何方式，比如 [ether](https://docs.ethers.org/v6/)、[viem](https://viem.sh/) 和 [web3.js](https://web3js.org/)。以及其它任何链的 SDK，包括非 EVM 兼容的区块链也可以使用这种方式来使用 Ant Design Web3。
+- 通过我们官方提供的 `@ant-design/web3-wagmi` 适配器配合 `@ant-design/web3` 使用，它基于 [wagmi](https://wagmi.sh/) 内置了和 EVM 兼容链的连接能力，你可以更加简单的使用 Ant Design Web3，不需要自己处理和区块链连接的相关逻辑。
+- 参考 `@ant-design/web3-wagmi` 的实现，自己实现一个类似的适配器，这样你就可以使用 wagmi 以外的其它方式连接不同的区块链了。具体实现方式可以参考[开发适配器](adapter.zh-CN.md)。
 
-## 使用 UI 组件
+下面是通过 `@ant-design/web3-wagmi` 的方式使用 Ant Design Web3 的一个例子：
 
-`@ant-design/web3` 是一个纯 UI 组件，你可以直接使用它，比如你可以用 `BrowserLink`：
+<code src="./demos/guide.tsx"></code>
 
-```tsx | pure
-import { BrowserLink } from '@ant-design/web3';
-
-export default () => {
-  return <BrowserLink address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />;
-};
-```
-
-## 连接区块链
-
-你也可以通过引入 `@ant-design/web3-ethereum` 中的 `EthereumProvider` 让一些 UI 组件可以连接到区块链。比如下面的示例展示了如何通过 `NFTImage` 组件显示一个 NFT 图片。示例中，通过 [zan.top](https://zan.top/) 提供的区块链节点服务可以请求 NFT 数据，你只需要向组件传入 `address` 和 `tokenId` 即可。
-
-```tsx | pure
-import { EthereumProvider, createProvider, ZANJsonRpcProvider } from '@ant-design/web3-ethereum';
-import { NFTImage } from '@ant-design/web3';
-
-const provider = createProvider({
-  rpcs: [
-    new ZANJsonRpcProvider({
-      apiKey: 'd0eeefc2a4da4a8ba707889259b437d6',
-    }),
-  ],
-});
-
-export default () => {
-  return (
-    <EthereumProvider provider={provider}>
-      <NFTImage address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={42} />
-    </EthereumProvider>
-  );
-};
-```
+如果你想要进一步尝试如何在自己的项目中使用 Ant Design Web3，或者想要从 0 创建一个基于 Ant Design Web3 的项目，你可以继续阅读[快速开始](quick-start.zh-CN.md)，祝你在 Web3 冲浪愉快！🌊🌊🌊

docs/guide/wagmi.md → docs/guide/quick-start.md

@@ -1,11 +1,11 @@
 ---
 nav: Guide
-group: Advance
+group: Basic
 ---
 
-# Using with wagmi
+# Quick Start
 
 <!-- prettier-ignore -->
 :::warning
-Waiting for translation
+Waiting for translation...
 :::

docs/guide/quick-start.zh-CN.md

@@ -0,0 +1,42 @@
+---
+nav: 指南
+group: 基础
+---
+
+# 快速开始
+
+> 在开始之前，推荐先学习 [React](https://react.dev)，并正确安装和配置了 [Node.js](https://nodejs.org/) v16 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经基本掌握了 React 全家桶的正确开发方式。
+
+## 安装依赖
+
+你可以通过 `npm` 或者 `pnpm` 等包管理工具安装相关依赖，示例如下：
+
+```shell
+npm i @ant-design/web3 @ant-design/web3-wagmi --save
+```
+
+## 使用 UI 组件
+
+`@ant-design/web3` 是一个纯 UI 组件，你可以直接使用它，比如你可以用 `Address`：
+
+```tsx
+import { Address } from '@ant-design/web3';
+
+export default () => {
+  return <Address ellipsis tooltip address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />;
+};
+```
+
+## 连接以太坊
+
+`@ant-design/web3` 本身不提供连接区块链的能力，它是一个纯粹的 UI 组件库，我们设计之初就考虑了它未来可以适配不同的区块链。但是我们官方基于 [wagmi](https://wagmi.sh/) 实现了一个适配器 `@ant-design/web3-wagmi`，它内置了和 EVM 兼容链的连接能力，你可以通过它来连接上以太坊。
+
+在 `@ant-design/web3-wagmi` 中，我们暴露了一个组件 `WagmiWeb3ConfigProvider`，它封装了 wagmi 的 `WagmiConfig`。
+
+你只要把 `WagmiWeb3ConfigProvider` 当做 `WagmiConfig` 来使用，这样在你的应用中的 Ant Design Web3 组件就可以自动连接上区块链了。
+
+下面是一个例子，当你在 React 应用的最外层使用 `WagmiWeb3ConfigProvider` 后，你的应用中的 `NFTImage` 就可以自动从以太坊上获取 NFT 的相关信息并展示了。
+
+<code src="./demos/quick-start.tsx"></code>
+
+当然，相比 `NFTImage`，可能我们使用更多的是连接区块链按钮的组件，你可以阅读 [Connector](/zh-CN/components/connector) 组件的具体文档来学习如何使用它。