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, WalletConnect )
• ⚙️ Generate mainnet & testnet ChainInfo from chain registry
• 📚 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

Quick start

Wrap your React app with <GrazProvider /> and use available graz hooks anywhere:

import { GrazProvider, mainnetChains } from "graz";

function App() {
  return (
    <GrazProvider
      // optional
      grazOptions={{
        defaultChain: mainnetChains.cosmos,
      }}
    >
      <Wallet />
    </GrazProvider>
  );
}

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 + Chakra UI: https://graz-example.vercel (source code)
• Vite: https://graz-vite-example.vercel.app (source code)

Third-party dependencies

graz uses various dependencies such as @cosmjs/cosmwasm-stargate and @keplr-wallet/types.

Rather than importing those packages directly, you can import from graz/dist/cosmjs and graz/dist/keplr which re-exports all respective dependencies:

- 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:

# using pnpm
pnpm add @cosmjs/cosmwasm-stargate @cosmjs/proto-signing @cosmjs/stargate @keplr-wallet/types

API

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

Maintainers

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

License

MIT License, Copyright (c) 2023 Graz