graz-interchain
adds multiple chain support for graz
.
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
andzustand
- 🔄 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.sh/examples/next (source code)
- Vite: https://graz.sh/examples/vite (source code)
- Next.js Starter: https://graz.sh/examples/starter (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.