Skip to main content

Overview

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, Capsule)
  • ⚙️ 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 missmatch we dcided 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 <GrazProvider /> and use available graz hooks anywhere:

import { GrazProvider } from "graz";

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

function App() {
return (
<GrazProvider
grazOptions={{
chains: [cosmoshub],
}}
>
<Wallet />
</GrazProvider>
);
}
import { 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

Maintainers

License

MIT License, Copyright (c) 2023 Graz