docs

INTEGRATING-WALLETS.md

@@ -1,108 +1,5 @@
-# How to Integrate your Wallet into Cosmos Kit
+# Integrating Wallets
 
-## 1️⃣ Prepare basic information for wallet
+[supported wallets](https://docs.cosmoskit.com/integrating-wallets#supported-wallets)
 
-### Required properties
-
-| Key      | Type | Comment |
-| ----------- | ----------- | -- |
-| **name**      | `WalletName = string`   | identifier |
-| **prettyName**   | `string`   | display name |
-| **mode**   | `WalletMode = 'extension' \| 'wallet-connect'`   | wallet client type |
-| **mobileDisabled**<sup>*</sup>  | `boolean`   | display on mobile or not |
-
-\* <span style={{fontSize: '0.85rem'}}> Usually `true` when **mode** is `wallet-connect`,  `false` when **mode** is `extension`.</span>
-
-### Optional properties
-
-| Key      | Type | Comment |
-| ----------- | ----------- | -- |
-| **rejectMessage**      | `string`   | error message thrown by wallet app/extension when user rejects |
-| **connectEventNames**   | `string[]`   | window event names to fire auto-connect |
-| **downloads**   | [`Downloads`](https://github.com/cosmology-tech/cosmos-kit/blob/4c1f4b9a818ca1afa08c2067fe0c29a740d8e5ea/packages/core/src/types/wallet.ts#L32-L37) | wallet app/extension download information |
-| **logo** | `string`   | wallet logo url, display on default modal |
-
-### Examples
-
-- [Keplr Extension - Wallet Info](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/extension/registry.ts)
-
-- [Keplr Mobile - Wallet Info](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/wallet-connect/registry.ts)
-
-
-## 2️⃣ Implement `WalletClient`
-
-`MainWallet` is a class organizing all `ChainWallet`s. **It should extend  `MainWalletBase` class**, in which protected `_chainWallets` property stores all `ChainWallet`s.
-
-### Required methods
-
-| Key      | Type |
-| ----------- | ----------- |
-| **getAccount**      | `(chainId: string) => Promise<WalletAccount>`<sup>*</sup>   |
-| **getOfflineSigner**   | `(chainId: string) => Promise<OfflineSigner> \| OfflineSigner`   |
-
-\* *Type **WalletAccount***
-
-```ts
-interface WalletAccount {
-  name?: string; // username
-  address: string;
-}
-```
-
-### Optional methods
-
-| Key      | Type | Comment |
-| ----------- | ----------- | -- |
-| **enable**      | `(chainIds: string \| string[]) => Promise<void>`   | give permission for the webpage to access wallet |
-| **addChain**   | `(chainInfo: ChainRecord) => Promise<void>`   | add new Cosmos-SDK based blockchains that isn't natively integrated to wallet app/extension |
-
-### Examples
-
-- [Keplr Client](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/client.ts)
-
-
-## 3️⃣ Extend `ChainWalletBase`
-
-Create a `ChainWallet` class that extends  `ChainWalletBase`. `ChainWallet` provides wallet information for a particular chain, e.g. `address`, `offlineSigner`, etc. 
-
-`ChainWalletBase` has implemented a bunch of methods such as wallet connection, sign, broadcast, etc. [[learn more]](#). Therefore, normally you don't need to do any extra work inside `ChainWallet`. But feel free to overwrite these methods or add new methods/properties if customization is needed to meet new demand.
-
-### Examples
-
-- [Keplr Extension - Chain Wallet](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/extension/chain-wallet.ts)
-
-- [Keplr Mobile - Chain Wallet](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/wallet-connect/chain-wallet.ts)
-
-
-## 4️⃣ Extend `MainWalletBase`
-
-Create a `MainWallet` class that extends `MainWalletBase`. `MainWallet` organizes all `ChainWallet`s, which are stored in protected member `_chainWallets`.
-
-> Note: Class `ChainWallet` created in [Step 3](#3️⃣-extend-chainwalletbase) is required in `MainWalletBase` construction.
-
-### Required methods
-
-| Key      | Type |
-| ----------- | ----------- |
-| **fetchClient**      | `() => WalletClient \| undefined \| Promise<WalletClient \| undefined>`<sup>*</sup>   |
-
-\* <span style={{fontSize: '0.85rem'}}> `WalletClient` is the one implemented in [Step 2](#2️⃣-implement-walletclient).</span>
-
-Also, feel free to overwrite methods in `MainWalletBase` or add new methods/properties if necessary.
-
-### Examples
-
-- [Keplr Extension - Main Wallet](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/extension/main-wallet.ts)
-
-- [Keplr Mobile - Main Wallet](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/wallet-connect/main-wallet.ts)
-
-
-## 5️⃣ Get `MainWallet` instance
-
-You can construct your `MainWallet` Instance according to your `MainWallet` construct method now. Usually the `walletInfo` object prepared in [Step 1](#1️⃣-prepare-basic-information-for-wallet) is imported here as a construction argument.
-
-### Examples
-
-- [keplrExtension & keplrMobile](https://github.com/cosmology-tech/cosmos-kit/tree/develop/packages/keplr/src/keplr.ts)
-
-Last but not least, append this instance to the `wallets` property of [WalletProvider](https://docs.cosmoskit.com/get-started#provider).
+[How to integrate new wallets into Cosmos Kit](https://docs.cosmoskit.com/integrating-wallets/adding-new-wallets)

packages/docs/pages/_meta.json

@@ -1,9 +1,9 @@
 {
   "index": "Introduction",
   "get-started": "Get Started",
-  "wallet-manager": "Wallet Manager",
   "integrating-wallets": "Integrating Wallets",
-  "wallet-provider": "Wallet Provider",
   "chain-provider": "Chain Provider",
-  "use-chain": "Hook - useChain"
+  "use-chain": "Hook - useChain",
+  "wallet-provider": "Wallet Provider",
+  "use-wallet": "Hook - useWallet"
 }

packages/docs/pages/get-started.mdx

@@ -16,7 +16,11 @@ yarn add @cosmos-kit/react @cosmos-kit/core @cosmos-kit/keplr chain-registry
 
 ### 2️⃣ Wrap Provider
 
-First, add the `WalletProvider` to your app, and include the supported chains and supported wallets:
+First, add [`ChainProvider`](https://docs.cosmoskit.com/chain-provider) or [`WalletProvider`](https://docs.cosmoskit.com/wallet-provider) to your app, with supported chains and supported wallets as properties.
+
+> Hint: properties of two providers are slightly different.
+
+Take `WalletProvider` as an example.
 
 ```tsx
 import * as React from 'react';
@@ -43,7 +47,15 @@ function CosmosApp() {
 
 ### 3️⃣ Consume with Hook
 
-Consume `WalletProvider` with the `useWallet` hook. It returns `WalletMananger` object, which provides wallet properties and functions.
+Consume Provider with the corresponding hook. 
+
+- Hook [`useChain`](https://docs.cosmoskit.com/use-chain) consumes [`ChainProvider`](https://docs.cosmoskit.com/chain-provider) and returns type [`ChainContext`](https://docs.cosmoskit.com/use-chain#type-chainconext)
+
+- Hook [`useWallet`](https://docs.cosmoskit.com/use-wallet) consumes [`WalletProvider`](https://docs.cosmoskit.com/wallet-provider) and returns type [`WalletMananger`](https://docs.cosmoskit.com/use-wallet#type---walletmanager)
+
+> Hint: return type properties of two hooks are slightly different.
+
+Take `useWallet` as an example.
 
 ```tsx
 import * as React from 'react';

packages/docs/pages/integrating-wallets/vectis.mdx

@@ -0,0 +1,41 @@
+import { WalletSection } from "../../components";
+import { walletNames } from "@cosmos-kit/vectis";
+
+# How to Add Vectis wallet to Cosmos Kit
+
+## add `@cosmoskit/vectis`
+
+```
+yarn add @cosmoskit/vectis
+```
+
+## import the wallets
+
+```js
+import { wallets as vectisWallets } from '@cosmos-kit/vectis';
+```
+
+## add to your provider
+
+```js
+function MyCosmosApp({ Component, pageProps }: AppProps) {
+  return (
+    <ChakraProvider theme={defaultTheme}>
+      <WalletProvider
+        chains={chains}
+        assetLists={assets}
+        wallets={[...vectisWallets]}
+      >
+        <Component {...pageProps} />
+      </WalletProvider>
+    </ChakraProvider>
+  );
+}
+
+export default MyCosmosApp;
+```
+
+## try it out!
+
+<WalletSection walletNames={walletNames}/>
+

packages/docs/pages/use-chain.mdx

@@ -35,4 +35,13 @@
 | **estimateFee**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**type**?: `CosmosClientType`,<br />**memo**?: `string`,<br />**multiplier**?: `number` | `StdFee \| undefined` | Y |
 | **sign**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**fee**?: `StdFee`,<br />**memo**?: `string`,<br />**type**?: `CosmosClientType`, | `TxRaw \| undefined` | Y |
 | **broadcast**  | if **type** is `undefined`, default using `SigningStargateClient` |     **signedMessages**: `TxRaw`,<br />**type**?: `CosmosClientType`, | `DeliverTxResponse \| undefined` | Y |
-| **signAndBroadcast**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**fee**?: `StdFee`,<br />**memo**?: `string`,<br />**type**?: `CosmosClientType`, | `DeliverTxResponse \| undefined` | Y |
+| **signAndBroadcast**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**fee**?: `StdFee`,<br />**memo**?: `string`,<br />**type**?: `CosmosClientType`, | `DeliverTxResponse \| undefined` | Y |
+
+
+## Examples
+
+🚀 [fetch address](https://github.com/cosmology-tech/cosmos-kit/blob/main/packages/example/pages/chains/index.tsx)
+
+🚀 [fetch balance & send tokens](https://github.com/cosmology-tech/cosmos-kit/blob/main/packages/example/pages/chains/tx.tsx)
+
+🚀 [vote](https://github.com/cosmology-tech/cosmos-kit/blob/main/packages/example/pages/chains/gov.tsx)

packages/docs/pages/use-wallet.mdx

@@ -0,0 +1,86 @@
+## Hook - useWallet
+
+- required provider: [**WalletProvider**](https://docs.cosmoskit.com/wallet-provider)
+
+- return type: [**WalletManager**](#type---walletmanager)
+
+## Type - WalletManager
+
+### properties
+
+| Name      | Description | Type | Default |
+| ----------- | ----------- | -- | -- |
+| **address**   | chain address from current selected wallet       | `string \| undefined` | `undefined` |
+| **username**   | username from current selected wallet       | `string \| undefined` | `undefined` |
+| **message**   | error/warn/info message       | `string \| undefined` | `undefined` |
+| **walletStatus**   | wallet status      | `WalletStatus` | `Disconnected` |
+
+### methods
+
+| Name      | Description | Parameters | Return Type | Is Async |
+| ----------- | ----------- | -- | -- | -- |
+| **openView**      | open modal       | - | `void` | N |
+| **connect**      | connect wallet       | - | `void` | Y |
+| **disconnect**      | disconnect current selected wallet       | - | `void` | Y |
+| **getRpcEndpoint** | test connection and return valid rpc endpoint    | - | `string \| undefined` | Y |
+| **getRestEndpoint**  | test connection and return valid rest endpoint    | - | `string \| undefined` | Y |
+| **getStargateClient**  | - | - | `StargateClient \| undefined` | Y |
+| **getCosmWasmClient**  | - | - | `CosmWasmClient \| undefined` | Y |
+| **getSigningStargateClient**  | - | - | `SigningStargateClient \| undefined` | Y |
+| **getSigningCosmWasmClient**  | - | - | `SigningCosmWasmClient \| undefined` | Y |
+| **sign**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**fee**?: `StdFee`,<br />**memo**?: `string`,<br />**type**?: `CosmosClientType`, | `TxRaw \| undefined` | Y |
+| **broadcast**  | if **type** is `undefined`, default using `SigningStargateClient` |     **signedMessages**: `TxRaw`,<br />**type**?: `CosmosClientType`, | `DeliverTxResponse \| undefined` | Y |
+| **signAndBroadcast**  | if **type** is `undefined`, default using `SigningStargateClient` |     **messages**: `EncodeObject[]`,<br />**fee**?: `StdFee`,<br />**memo**?: `string`,<br />**type**?: `CosmosClientType`, | `DeliverTxResponse \| undefined` | Y |
+
+## Signing Client
+
+There two signing clients available via `walletManager` functions: `getSigningStargateClient()` and `getSigningCosmWasmClient()`.
+
+Using signing client in react component:
+
+```tsx
+import * as React from 'react';
+import { cosmos } from 'interchain';
+import { StdFee } from '@cosmjs/amino';
+import { useWallet } from "@cosmos-kit/react";
+
+function Component () => {
+    const walletManager = useWallet();
+    const {
+        getSigningStargateClient,
+        getSigningCosmWasmClient,
+        address,
+      } = walletManager;
+
+    const sendTokens = async () => {
+      const stargateClient = await getSigningStargateClient();
+      if (!stargateClient || !address) {
+          console.error('stargateClient undefined or address undefined.')
+          return;
+      }
+
+      const { send } = cosmos.bank.v1beta1.MessageComposer.withTypeUrl;
+
+      const msg = send({
+        amount: [ { denom: 'uatom', amount: '1000' } ],
+        toAddress: address, fromAddress: address
+      });
+
+      const fee: StdFee = { amount: [ { denom: 'uatom', amount: '864' } ], gas: '86364' };
+
+      await stargateClient.signAndBroadcast(address, [msg], fee, memo);
+    }
+}
+```
+
+## Sign & Broadcast
+
+Three methods are provided in `WalletManager`.
+
+```ts
+- sign(messages, fee?, memo?, type?)
+- broadcast(signedMessages, type?)
+- signAndBroadcast(messages, fee?, memo?, type?)
+```
+
+Default to using `StargateSigningClient`. If you want to use `CosmWasmSigningClient` instead, input `type` as `"cosmwasm"`.

packages/docs/pages/wallet-provider.mdx

@@ -129,6 +129,8 @@ If `walletModal` not provided, by default using `simple_v2` for modal.
 
 For `simple_v1`, the order of wallets follows the order of property `wallets` in WalletProvider. And basically `simple_v2` follows the same rule, except that all mobiles are moved to the back.
 
+### customize modal
+
 You can also define your own modal component with required props.
 
 Here is an example design a new modal.