0.1.x (#121)

Signed-off-by: Nur Fikri <[email protected]>
Co-authored-by: Griko Nibras <[email protected]>

.npmrc

@@ -1,3 +1,3 @@
 public-hoist-pattern[]=*
 publish-branch=dev
-strict-peer-dependencies=false
+prefer-workspace-packages=true

.vscode/settings.json

@@ -6,7 +6,7 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"

CONTRIBUTING.md

@@ -16,13 +16,14 @@ This project and everyone participating in it is governed by the [`graz` Code of
 
 ### Why this library exist?
 
-Currently there is no stable library for cosmos wallets, in ethereum there's [`wagmi`](https://wagmi.sh) with hook patterns that we inspired from.
+At the time there were no stable libraries for cosmos wallets. We were inspired by the patterns in [`wagmi`](https://wagmi.sh) in the Ethereum ecosystem.
 
 ## What should I know before I get started?
 
-It would be better you know these things:
+It greatly helps if you already have a basic understanding of:
 
 - [Cosmos ecosystem](https://cosmos.network/)
+- [Cosmjs](https://cosmos.github.io/cosmjs/)
 - [`react-query`](https://react-query.tanstack.com/)
 - [`zustand`](https://github.com/pmndrs/zustand)
 - [Keplr Wallet](https://docs.keplr.app)
@@ -49,11 +50,9 @@ The following steps will get you up and running to contribute to `graz`:
 
 ```sh
 ├── packages/             # local packages
-│   ├── eslint-config/    # project eslint configuration
-│   ├── prettier-config/  # project prettier configuration
 │   └── graz/             # graz
 ├── docs/                 # documentation website
-└── example/              # example website (nextjs + chakra ui)
+└── example/*             # example website (nextjs + chakra ui)
 ```
 
 ### graz
@@ -66,31 +65,34 @@ The following steps will get you up and running to contribute to `graz`:
 │   └── provider/         # application state providers
 │   └── store/            # application state stores
 │   └── types/            # shared types
-├── dist/                 # output
+├── dist/                 # output graz package
+├── chains/               # output chains
 ```
 
 ## Development
 
-- `pnpm install`: bootstrap the entire project
+- `pnpm graz install`: install `graz` project
+- `pnpm graz build`: build `graz` package
+- `pnpm install`: install all projects
 - `pnpm dev`: compiles `graz` and start the development server of the example app
-- `pnpm docs dev`: start the documentation website
+- `pnpm project:docs dev`: start the documentation website
 - `pnpm example dev`: start the example app
 
 ## Pull Request
 
-Pull requests need only the 👍 of one collaborator to be merged.
+Pull requests only need one collaborator 👍 to be merged.
 
 ### Commit Convention
 
 Before you create a Pull Request, please check whether your commits comply with the commit conventions used in this repository.
 
-When you create a commit we kindly ask you to follow the convention category(scope or module): message in your commit message while using one of the following categories:
+When you create a commit we kindly ask you to follow the convention of category (scope or module): title in your commit message, using one of the following categories:
 
 - `feat / feature`: all changes that introduce completely new code or new features
-- `fix`: changes that fix a bug (ideally you will additionally reference an issue if present)
-- `refactor`: any code related change that is not a fix nor a feature
+- `fix`: changes that fix a bug (reference the relevant issue(s) if possible)
+- `refactor`: any code-related change that is not a fix nor a feature
 - `docs`: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage)
-- `build`: all changes regarding the build of the software, changes to dependencies or the addition of new dependencies
+- `build`: all changes regarding the build of the software, updates to dependencies, or the addition of new dependencies
 - `test`: all changes regarding tests (adding new tests or changing existing ones)
 - `ci`: all changes regarding the configuration of continuous integration (i.e. github actions, ci system)
 - `chore`: all changes to the repository that do not fit into any of the above categories

README.md

@@ -9,8 +9,8 @@
 ## Features
 
 - 🪝 20+ hooks for interfacing with wallets, clients, signers, etc. (connecting, view balances, send tokens, etc.)
-- 💳 Multiple wallet supports (Keplr, Leap, Cosmostation, WalletConnect )
-- ⚙️ Generate mainnet & testnet `ChainInfo` from chain registry
+- 💳 Multiple wallet supports (Keplr, Leap, Cosmostation, Vectis, Metamask Snap, WalletConnect)
+- ⚙️ Generate mainnet & testnet `ChainInfo`
 - 📚 Built-in caching, request deduplication, and all the good stuff from [`@tanstack/react-query`](https://tanstack.com/query) and [`zustand`](https://github.com/pmndrs/zustand)
 - 🔄 Auto refresh on wallet and network change
 - 👏 Fully typed and tree-shakeable
@@ -35,21 +35,39 @@ yarn add graz
 pnpm add graz
 ```
 
+### Install peer dependencies
+
+To avoid version mismatch we decided to make these packages as peer dependencies:
+
+```shell
+# using npm
+npm install @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+
+# using yarn
+yarn add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+
+# using pnpm
+pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+```
+
 ## Quick start
 
 Wrap your React app with `<GrazProvider />` and use available `graz` hooks anywhere:
 
 ```jsx
-import { GrazProvider, mainnetChains } from "graz";
+import { GrazProvider } from "graz";
+
+const cosmoshub: ChainInfo = {
+  chainId: "cosmoshub-4",
+  chainName: "Cosmos Hub",
+  //... rest of cosmoshub ChainInfo
+}
 
 function App() {
   return (
-    <GrazProvider
-      // optional
-      grazOptions={{
-        defaultChain: mainnetChains.cosmos,
-      }}
-    >
+    <GrazProvider grazOptions={{
+      chains: [cosmoshub]
+    }}>
       <Wallet />
     </GrazProvider>
   );
@@ -79,27 +97,9 @@ function Wallet() {
 
 ## Examples
 
+- Next.js + Multi chain: https://graz.sh/examples/starter ([source code](https://github.com/graz-sh/graz/tree/dev/example/starter/))
 - Next.js + Chakra UI: https://graz.sh/examples/next ([source code](./example/next/))
 - Vite: https://graz.sh/examples/vite ([source code](./example/vite/))
-- Next.js Starter: https://graz.sh/examples/starter ([source code](https://github.com/graz-sh/graz/tree/dev/example/starter/))
-
-## Third-party dependencies
-
-`graz` uses various dependencies such as [`@cosmjs/cosmwasm-stargate`](https://www.npmjs.com/package/@cosmjs/cosmwasm-stargate) and [`@keplr-wallet/types`](https://www.npmjs.com/package/@keplr-wallet/types).
-
-Rather than importing those packages directly, you can import from [`graz/dist/cosmjs`](./packages/graz/src/cosmjs.ts) and [`graz/dist/keplr`](./packages/graz/src/keplr.ts) which re-exports all respective dependencies:
-
-```diff
-- import type { CosmWasmClient } from "@cosmjs/cosmwasm-stargate";
-+ import type { CosmWasmClient } from "graz/dist/cosmjs";
-```
-
-But if you prefer importing from their respective pacakges, you can install dependencies that `graz` uses for better intellisense:
-
-```sh
-# using pnpm
-pnpm add @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @cosmjs/stargate @keplr-wallet/types
-```
 
 ## API
 

docs/docs/change-log.md

@@ -1,9 +1,18 @@
 ---
-sidebar_position: 15
+sidebar_position: 8
 ---
 
 # Changelog
 
+## Version 0.1.0
+
+- Multi Chain experience
+- Removed `GrazChain` type
+- Reworked `GrazProvider`
+- Roworked most of the hooks
+
+Read migration guide [here](./migration-guide/#010-breaking-changes)
+
 ## Version 0.0.51
 
 - Fix Wallet Connect multiple prompt when connect in mobile
@@ -90,5 +99,5 @@ sidebar_position: 15
 
 - ✅ [WalletConnect v2 support](./wallet-connect.md)
 - ✅ Added more `WalletType` for connecting WalletConnect wallets
-- 🗑️ Deprecated constants, will be removed in next version `mainnetChains`, `mainnetChainsArray`, `testnetChains`, `testnetChainsArray`. Use [`graz generate`](./generate-chain-info.mdx)👍
+- 🗑️ Deprecated constants, will be removed in next version `mainnetChains`, `mainnetChainsArray`, `testnetChains`, `testnetChainsArray`. Use [`graz generate`](./generate-chain-info.md)👍
 - 🛠️ Splitted internal store between user session and graz internal

docs/docs/constants/WALLET_TYPES.md

@@ -5,14 +5,14 @@
 ### Usage
 
 ```tsx
-import { WALLET_TYPES, useConnect, mainnetChains } from "graz";
+import { WALLET_TYPES, useConnect } from "graz";
 
 export const SupportedWallet = () => {
   const { connect } = useConnect();
   return (
     <div>
       {WALLET_TYPES.map((name) => (
-        <button onClick={connect({ chain: mainnetChains.cosmoshub, walletType: name })} key={name}>
+        <button onClick={connect({ chain: cosmoshub, walletType: name })} key={name}>
           {name}
         </button>
       ))}

docs/docs/contributing.md

@@ -16,13 +16,14 @@ This project and everyone participating in it is governed by the [`graz` Code of
 
 ### Why this library exist?
 
-Currently there is no stable library for cosmos wallets. We were inspired by the patterns in [`wagmi`](https://wagmi.sh) in the Etherium ecosystem.
+At the time there were no stable libraries for cosmos wallets. We were inspired by the patterns in [`wagmi`](https://wagmi.sh) in the Ethereum ecosystem.
 
 ## What should I know before I get started?
 
 It greatly helps if you already have a basic understanding of:
 
 - [Cosmos ecosystem](https://cosmos.network/)
+- [Cosmjs](https://cosmos.github.io/cosmjs/)
 - [`react-query`](https://react-query.tanstack.com/)
 - [`zustand`](https://github.com/pmndrs/zustand)
 - [Keplr Wallet](https://docs.keplr.app)
@@ -49,11 +50,9 @@ The following steps will get you up and running to contribute to `graz`:
 
 ```sh
 ├── packages/             # local packages
-│   ├── eslint-config/    # project eslint configuration
-│   ├── prettier-config/  # project prettier configuration
 │   └── graz/             # graz
 ├── docs/                 # documentation website
-└── example/              # example website (nextjs + chakra ui)
+└── example/*             # example website (nextjs + chakra ui)
 ```
 
 ### graz
@@ -66,14 +65,17 @@ The following steps will get you up and running to contribute to `graz`:
 │   └── provider/         # application state providers
 │   └── store/            # application state stores
 │   └── types/            # shared types
-├── dist/                 # output
+├── dist/                 # output graz package
+├── chains/               # output chains
 ```
 
 ## Development
 
-- `pnpm install`: bootstrap the entire project
+- `pnpm graz install`: install `graz` project
+- `pnpm graz build`: build `graz` package
+- `pnpm install`: install all projects
 - `pnpm dev`: compiles `graz` and start the development server of the example app
-- `pnpm docs dev`: start the documentation website
+- `pnpm project:docs dev`: start the documentation website
 - `pnpm example dev`: start the example app
 
 ## Pull Request

docs/docs/examples/index.md

@@ -1,19 +1,19 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 ---
 
 # Examples
 
-## Next.js
-
-- Website: https://graz.sh/examples/next
-- GitHub: https://github.com/graz-sh/graz/tree/dev/example/next
-
-## Next.js Starter
+## Next.js + Multi chain
 
 - Website: https://graz.sh/examples/starter
 - GitHub: https://github.com/graz-sh/graz/tree/dev/example/starter
 
+## Next.js Simple
+
+- Website: https://graz.sh/examples/next
+- GitHub: https://github.com/graz-sh/graz/tree/dev/example/next
+
 ## Vite
 
 - Website: https://graz.sh/examples/vite

docs/docs/generate-chain-info.mdx → docs/docs/generate-chain-info.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Generate ChainInfo
@@ -48,5 +48,5 @@ in your package.json add it to in your install or postInstall scripts
 After you generate `ChainInfo` you can use it in you project
 
 ```ts
-import { axelar, cosmoshub, sommelier, mainnetChains, testnetChains } from "graz/chains";
+import { axelar, cosmoshub, sommelier } from "graz/chains";
 ```

docs/docs/getting-started.mdx

@@ -27,6 +27,21 @@ yarn add graz
 pnpm add graz
 ```
 
+## Install peer dependencies
+
+To avoid version mismatch we decided to make these packages as peer dependencies:
+
+```shell
+# using npm
+npm install @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+
+# using yarn
+yarn add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+
+# using pnpm
+pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc long
+```
+
 ## Quick start
 
 ### 1. Wrap app with `<GrazProvider />`
@@ -45,20 +60,21 @@ function App() {
 
 ### 2. Configure `grazOptions`
 
-:::info
-
-**Optional** You can configure your default chain, default wallet, default `SigningClient`
-
-:::
+```tsx
+import { ChainInfo } from "@keplr-wallet/types";
+import { GrazProvider } from "graz";
 
-```jsx
-import { GrazProvider, mainnetChains } from "graz";
+const cosmoshub: ChainInfo = {
+  chainId: "cosmoshub-4",
+  chainName: "Cosmos Hub",
+  //... rest of cosmoshub ChainInfo
+};
 
 function App() {
   return (
     <GrazProvider
       grazOptions={{
-        defaultChain: mainnetChains.cosmoshub,
+        chains: [cosmoshub],
       }}
     >
       <Wallet />
@@ -72,7 +88,7 @@ function App() {
 Use hooks! Every component inside the GrazProvider is now set up to use the graz hooks.
 
 ```jsx
-import { mainnetChains, useAccount, useConnect, useDisconnect } from "graz";
+import { useAccount, useConnect, useDisconnect } from "graz";
 
 function Wallet() {
   const { connect, status } = useConnect();

docs/docs/guides/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Guides",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Collection of Constants that graz provide"
+  }
+}