Awesome

graz is a collection of React hooks containing everything you need to start working with the Cosmos ecosystem.

Features

🪝 20+ hooks for interfacing with wallets, clients, signers, etc. (connecting, view balances, send tokens, etc.)
💳 Multiple wallet supports (Keplr, Leap, Cosmostation, Vectis, Station, XDefi, Metamask Snap, WalletConnect)
⚙️ Generate mainnet & testnet ChainInfo
📚 Built-in caching, request deduplication, and all the good stuff from @tanstack/react-query and zustand
🔄 Auto refresh on wallet and network change
👏 Fully typed and tree-shakeable
...and many more ✨

Requirements

graz requires react@>=17 due to using function components and hooks and the new JSX transform.

Installing

Install graz using npm, yarn, or pnpm:

# using npm
npm install graz

# using yarn
yarn add graz

# using pnpm
pnpm add graz

Install peer dependencies

To avoid version mismatch we decided to make these packages as peer dependencies:

# 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 <QueryClientProvider /> and <GrazProvider />, and use available graz hooks anywhere:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { GrazProvider } from "graz";

const queryClient = new QueryClient();

const cosmoshub: ChainInfo = {
  chainId: "cosmoshub-4",
  chainName: "Cosmos Hub",
  //... rest of cosmoshub ChainInfo
}

function App() {
  return (
    <QueryClientProvider queryClient={queryClient}>
      <GrazProvider grazOptions={{
        chains: [cosmoshub]
      }}>
        <Wallet />
      </GrazProvider>
    </QueryClientProvider>
  );
}

import { mainnetChains, useAccount, useConnect, useDisconnect } from "graz";

function Wallet() {
  const { connect, status } = useConnect();
  const { data: account, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  function handleConnect() {
    return isConnected ? disconnect() : connect();
  }

  return (
    <div>
      {account ? `Connected to ${account.bech32Address}` : status}
      <button onClick={handleConnect}>{isConnected ? "Disconnect" : "Connect"}</button>
    </div>
  );
}

Examples

Next.js + Multi chain: https://graz.sh/examples/starter (source code)
Next.js + Chakra UI: https://graz.sh/examples/next (source code)
Vite: https://graz.sh/examples/vite (source code)

API

You can read more about available hooks and exports on Documentation Site or via paka.dev.

Maintainers

Griko Nibras (@grikomsn)
Nur Fikri (@codingki)