docs: move docs of cosmos-kit from docs repo to product repo

.github/workflows/docs.yml

@@ -0,0 +1,52 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "docs/**"
+      - ".github/workflows/docs.yaml"
+
+env:
+  # Repository specific variables
+  REPO_NAME: cosmos-kit
+  DOCS_DEST_PATH: pages/cosmos-kit
+
+jobs:
+  docs-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          enable-global-cache: true
+
+      - name: Clone docs repository
+        run: git clone https://x-access-token:${{ secrets.GH_HYPERWEB_PAT }}@github.com/hyperweb-io/docs.hyperweb.io.git external-docs
+
+      - name: Sync the docs and build
+        run: |
+          rsync -av --delete ./docs/ ./external-docs/${{ env.DOCS_DEST_PATH }}/
+          cd external-docs
+          yarn install
+          yarn export
+
+      - name: Git push
+        run: |
+          cd external-docs
+          git config user.name 'GitHub Action'
+          git config user.email 'action@github.com'
+          git add .
+          if git diff --cached --quiet; then
+              echo "No changes to commit."
+          else
+              git commit -m "Automated: Update ${{ env.REPO_NAME }} documentation"
+              git push
+          fi
+

docs/_meta.json

@@ -0,0 +1,10 @@
+{
+  "index": "Introduction",
+  "get-started": "Get Started",
+  "migration-to-v2": "Migration to V2",
+  "provider": "Provider",
+  "hooks": "Hooks",
+  "cookbook": "Cookbook",
+  "integrating-wallets": "Integrating Wallets",
+  "advanced": "Advanced"
+}

docs/advanced.md

@@ -0,0 +1,82 @@
+# Advanced
+
+## Code Structure
+
+To make user better understand the whole design structure of CosmosKit, here to briefly introduce some important classes from `@cosmos-kit/core`.
+
+There are four important classes.
+
+- WalletManager
+- MainWalletBase
+- ChainWalletBase
+- WalletRepo
+
+Before all, we need to clarify that there are two types of entities in CosmosKit as a wallet adapter: **Chain** and **Wallet**. Chain is identified by chain name i.e. `cosmoshub`, `osmosis` etc. And wallet is identified by wallet name i.e. `keplr-extension`, `keplr-mobile`, `cosmostation-extension` etc.
+
+> Note that we're taking a single wallet application as a wallet in CosmosKit rather than the wallet product name. Taking `Keplr` as an example, we differentiate `extension` and `mobile` in our code because they are connected via totally different codes. So for product `Keplr`, we have two wallets `keplr-extension` and `keplr-mobile` in CosmosKit.
+
+### WalletManager
+
+`WalletManager` is the entrance of the whole code and it manages all `WalletRepo`, `MainWalletBase`, `ChainWalletBase` instances in it. It also corresponds to `ChainProvider` in `@cosmos-kit/react-lite` and `@cosmos-kit/react`. You can find that the properties of JSX element `ChainProvider` are almost the same with the constructor arguments of `WalletManager`. All necessary chain information and wallet information from `ChainProvider` will be passed to corresponding wallet classes via `WalletManager`.
+
+Three important properties/arguments in `ChainProvider`/`WalletManager` are `chains`, `assetLists` and `wallets`. `chains` and `assetLists` provide chain information, and `wallets` provides wallet information. Actually `wallets` is an array of `MainWalletBase` instances. Here leads to the second class `MainWalletBase`.
+
+### MainWalletBase
+
+`MainWalletBase` is meant to provide a base implementation and unified interface for all different wallets like `keplr-extension`, `keplr-mobile` and `cosmostation-extension`. Basically every wallet has it's own `MainWallet` class, which extends `MainWalletBase` in common, but with `WalletClient` implemented in different ways. In this way `WalletManager` can handle all different wallets no matter how different they're inside.
+
+> For practice you can take a look at [How to Integrate New Wallets into CosmosKit](/integrating-wallets/adding-new-wallets)
+
+`MainWalletBase` is only about wallet and it's not about any specific chain. And it's responsible for initializing wallet client and managing all chain wallets. Here brings in the third class `ChainWalletBase`.
+
+> So far `MainWalletBase` is dealing with four different broadcast/synchronization events for chain wallets.
+>
+> - broadcast_client
+> - broadcast_env
+> - sync_connect
+> - sync_disconnect
+>
+> See details below.
+
+### ChainWalletBase
+
+When you're trying to connect to a wallet, you always need to provide a target chain name so that the wallet knows what to response. So `ChainWalletBase` is the class actually being used for real connection. It's the finest grain of functionality that with chain specified and also wallet specified.
+
+We're separating `MainWalletBase` and `ChainWalletBase` because it's clearer to put some common properties like `wallet client` and `env` in the `MainWalletBase` to enable
+centralized management and distribution (events `broadcast_client` and `broadcast_env`), and put only chain specified functionalities in `ChainWalletBase`.
+
+Basically how many `chains` are provided in `ChainProvider` or `WalletManager`, how many `ChainWalletBase` instances will be constructed for a wallet. `ChainWalletBase` instances are independent with each other unless `sync` is set `true`. All the synchronization are also handled in `MainWalletBase` (events `sync_connect` and `sync_disconnect`).
+
+### WalletRepo
+
+We have a class `MainWalletBase` with wallet specified to manage all chain wallets. All these chain wallets are with the same wallet name but different chain name. Accordingly we also have another class `WalletRepo`, which with chain specified to manage all chain wallets that with the same chain name but different wallet name.
+
+### MainWalletBase vs. WalletRepo
+
+#### 1. **MainWalletBase**
+- **Purpose**: Manages a collection of chain wallets.
+- **Key Identifier**: Wallet name.
+- **Example**: It handles wallets like cosmoshub/keplr-extension, osmosis/keplr-extension, etc. These are wallets from different chains but with the same wallet name.
+
+#### 2. **WalletRepo**
+- **Purpose**: Manages chain wallets too, but with a different approach.
+- **Key Identifier**: Chain name.
+- **Example**: It manages wallets like cosmoshub/keplr-extension, cosmoshub/keplr-mobile, etc. These are wallets from the same chain but with different wallet names.
+
+#### Common Point
+- **Both MainWalletBase and WalletRepo** are involved in managing chain wallets, which are wallets associated with different blockchain networks.
+
+#### Key Differences
+- **MainWalletBase**: Focuses on managing wallets based on the wallet’s name. It doesn’t matter what chain the wallet is from; as long as they share the same wallet name, MainWalletBase manages them.
+- **WalletRepo**: Concentrates on managing wallets based on the chain’s name. Here, the specific wallet names don’t matter; WalletRepo groups and manages wallets that are on the same blockchain network.
+
+#### Practical Use
+- **In some decentralized applications (dapps)**, the focus might be more on the blockchain network (chain) rather than the wallet itself. In such cases, WalletRepo is particularly useful because it provides a perspective based on the chain, allowing different wallets on the same chain to be managed together.
+
+#### Summary
+- **MainWalletBase**: Manages wallets across different chains but with the same wallet name.
+- **WalletRepo**: Manages different wallets on the same chain.
+
+In essence, these two classes offer different ways of organizing and accessing chain wallets, based on what the primary point of interest is (wallet name or chain name).
+
+So far `WalletRepo` is only used in [`WalletModal`](https://docs.cosmology.zone/cosmos-kit/provider/chain-provider#walletmodal) properties.

docs/cookbook/_meta.json

@@ -0,0 +1,4 @@
+{
+  "connect-multi-chains": "Connect Multiple Chains",
+  "sign": "Sign"
+}

docs/cookbook/connect-multi-chains.mdx

@@ -0,0 +1,56 @@
+## How to connect multiple chains?
+
+### 1. Use `useChains` Hook
+CosmosKit introduces **[`useChains`](../hooks/use-chains)** hook starting from `v2.3.0`. Use it to connect to multiple chains.
+
+### 2. For A Specific Wallet (No Modal Required)
+
+Let's take `keplr-extension` for example.
+
+```javascript
+import { useWalletClient } from "@cosmos-kit/react";
+
+export default function Home() {
+  const { status, client } = useWalletClient("keplr-extension"); // or cosmostation-extension, leap-extension, etc.
+
+  useEffect(() => {
+    if (status === "Done") {
+      client.enable?.(["cosmoshub-4", "osmosis-1", "juno-1"]);
+      client.getAccount?.("juno-4").then((account) => console.log(account));
+      client.getAccount?.("osmosis-1").then((account) => console.log(account));
+      client
+        .getAccount?.("cosmoshub-4")
+        .then((account) => console.log(account));
+    }
+  }, [status]);
+  // ...
+}
+```
+
+### 3. No Specific Wallets (Modal Required, Version Prior to `v2.3.0`)
+
+There's no `useChains` hook in CosmosKit then, so the best you can do is below.
+
+```javascript
+export default function Home() {
+  const { openView } = useChain("cosmoshub"); // or juno, osmosis, etc.
+  const { status, client } = useWalletClient();
+
+  useEffect(() => {
+    if (status === "Done") {
+      client.enable?.(["cosmoshub-4", "osmosis-1", "juno-1"]);
+      client.getAccount?.("juno-4").then((account) => console.log(account));
+      client.getAccount?.("osmosis-1").then((account) => console.log(account));
+      client
+        .getAccount?.("cosmoshub-4")
+        .then((account) => console.log(account));
+    }
+  }, [status]);
+
+  return (
+    <div style={{ textAlign: "center", margin: "4rem" }}>
+      <Button onClick={openView}>Connect</Button>
+    </div>
+  );
+}
+```

docs/cookbook/sign.mdx

@@ -0,0 +1,41 @@
+# Sign
+
+## Global Settings
+
+```ts
+<ChainProvider
+    ...
+    signerOptions={{
+        preferredSignType: (chain: Chain) => {
+            return 'amino';
+        }
+    }}
+>
+    <Components />
+</ChainProvider>
+
+const { getSigningStargateClient } = useChain('cosmoshub');
+const aminoSigningClient = await getSigningStargateClient();
+```
+
+By default use `amino` signer. Or you need to set `return 'direct'` if `direct` signer required.
+
+## Individual Settings
+
+```ts
+const { status, client } = useWalletClient('keplr-extension');
+
+if (status === 'Done') {
+    /**
+     * OR:
+     * const aminoSigner = client.getOfflineSignerAmino('cosmoshub');
+     * const directSigner = client.getOfflineSignerDirect('cosmoshub');
+    */
+    const aminoSigner = client.getOfflineSigner('cosmoshub', 'amino');
+}
+
+const aminoSigningClient = await SigningStargateClient.connectWithSigner(
+      rpcEndpoint,
+      aminoSigner
+    );
+```

docs/get-started.mdx

@@ -0,0 +1,105 @@
+# How to use CosmosKit
+
+> 💡 Make sure you are using `React18`
+>
+> `CosmosKit V1` is deprecated, we suggest using [`CosmosKit V2`](./migration-to-v2)
+>
+> `defaultSignOptions` has been preset as below in latest version (core >= 2.7, react-lite >= 2.5, react >= 2.9):
+
+```json
+{
+    preferNoSetFee: false,
+    preferNoSetMemo: true,
+    disableBalanceCheck: true,
+  };
+```
+
+## Quickstart
+
+🏁 Get started quickly by using [create-cosmos-app](https://github.com/hyperweb-io/create-cosmos-app) to help you build high-quality Cosmos apps fast!
+
+## Use CosmosKit from Scratch
+
+### 1️⃣ Install Dependencies
+
+Taking `Keplr` wallet as an example.
+
+```sh
+yarn add @cosmos-kit/react @cosmos-kit/keplr chain-registry
+```
+
+`@cosmos-kit/react` includes default modal made with `@interchain-ui/react`. If [customized modal](./provider/chain-provider/#customize-modal-with-walletmodal) is provided, you can use `@cosmos-kit/react-lite` instead to lighter your app.
+
+There are multiple wallets supported by CosmosKit. Details see [Integrating Wallets](./integrating-wallets)
+
+> Note: `@cosmjs/*` packages are peer dependencies in `@cosmos-kit/core`, so if you're not using `@cosmjs/*` in your dapp, `yarn install` would complain UNMET cosmjs peer dependencies.
+
+### 2️⃣ Wrap Provider
+
+First, add [`ChainProvider`](./provider/chain-provider) and provider [required properties](./provider/chain-provider#required-properties).
+
+Example:
+
+```tsx
+import * as React from 'react';
+
+import { ChainProvider } from '@cosmos-kit/react';
+import { chains, assets } from 'chain-registry';
+import { wallets } from '@cosmos-kit/keplr';
+
+// Import this in your top-level route/layout
+import "@interchain-ui/react/styles";
+
+function CosmosApp() {
+  return (
+    <ChainProvider
+      chains={chains} // supported chains
+      assetLists={assets} // supported asset lists
+      wallets={wallets} // supported wallets
+      walletConnectOptions={...} // required if `wallets` contains mobile wallets
+    >
+      <YourWalletRelatedComponents />
+    </ChainProvider>
+  );
+}
+```
+
+### 3️⃣ Consume with Hook
+
+Take `useChain` as an example.
+
+```tsx
+import * as React from 'react';
+
+import { useChain } from "@cosmos-kit/react";
+
+function Component ({ chainName }: { chainName: string }) => {
+    const chainContext = useChain(chainName);
+
+    const {
+      status,
+      username,
+      address,
+      message,
+      connect,
+      disconnect,
+      openView,
+    } = chainContext;
+}
+```
+
+## Localstorage Settings
+
+### current wallet
+
+- **Key**: `cosmos-kit@2:core//current-wallet`
+- **Type**: `string`
+
+It records current wallet name. You can use this key to implement auto-connection in dapp. And it will expire after provided [session duration](./provider/chain-provider#sessionoptions).
+
+### accounts
+
+- **Key**: `cosmos-kit@2:core//accounts`
+- **Type**: `SimpleAccount[]`
+
+It records the connected chains' account information. It's used for account restore when refreshing in CosmosKit. And it will expire after provided [session duration](./provider/chain-provider#sessionoptions).

docs/hooks/_meta.json

@@ -0,0 +1,12 @@
+{
+  "index": "Introduction",
+  "use-chain": "- useChain",
+  "use-chains": "- useChains",
+  "use-chain-wallet": "- useChainWallet",
+  "use-iframe": "- useIframe",
+  "use-manager": "- useManager",
+  "use-modal-theme": "- useModalTheme",
+  "use-name-service": "- useNameService",
+  "use-wallet": "- useWallet",
+  "use-wallet-client": "- useWalletClient"
+}

docs/hooks/index.mdx

@@ -0,0 +1,26 @@
+There are multiple hooks provided in CosmosKit. They all require [**ChainProvider**](./provider/chain-provider) from either `@cosmos-kit/react` or `@cosmos-kit/react-lite` to provide necessary information.
+
+- [`useChain`](./hooks/use-chain): Provide chainWallet related properties and methods, and support multiple chains connected at one time. When `useChain` is called, corresponding chainWallets will be activated.
+
+- [`useChainWallet`](./hooks/use-chain-wallet): Provide chainWallet related properties and methods, and support multiple chains and wallets connected at one time. When `useChainWallet` is called, corresponding chainWallet will be activated.
+
+> See more information about [Differences Between `useChain` And `useChainWallet`](#differences-between-usechain-and-usechainwallet)
+
+- [`useManager`](./hooks/use-manager): Manage all chains and wallets.
+
+- [`useModalTheme`](./hooks/use-modal-theme): Manage default modal themes.
+
+- [`useNameService`](./hooks/use-name-service): Get alias name of address from a particular name server.
+
+- [`useWallet`](./hooks/use-wallet): Manage all chainWallets and the global status for a particular wallet.
+
+- [`useWalletClient`](./hooks/use-wallet-client): Get the wallet client for a particular wallet.
+
+- [`useIframe`](./hooks/use-iframe): Set up an iframe that can access the currently connected wallet automatically.
+
+## Differences Between `useChain` And `useChainWallet`
+
+1. `useChainWallet` requires an extra parameter `walletName`.
+2. `useChain` will pop up a wallet modal to connect while `useChainWallet` not.
+3. `useChain` exposes extra `openView` and `closeView` methods and `walletRepo` property.
+4. the return value of methods `getRpcEndpoint`, `getRestEndpoint`, `getStargateClient`, `getCosmWasmClient`, `getNameService` can be different between `useChain` and `useChainWallet`, because `useChain` explores all `chainWallets` related to the parameter `chainName`.