Skip to content

graz-sh/graz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f916347 Β· Dec 11, 2023
Jul 31, 2023
Nov 17, 2023
Dec 11, 2023
Nov 22, 2023
Dec 11, 2023
May 30, 2023
Nov 17, 2023
Jul 3, 2022
Jul 31, 2023
Nov 17, 2023
Jul 31, 2023
Nov 22, 2023
Aug 12, 2023
Nov 17, 2023
Nov 22, 2023
Sep 1, 2023
Oct 12, 2022

Repository files navigation

graz

npm/v npm/dt stars

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, 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 <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 { 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

API

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

Maintainers

License

MIT License, Copyright (c) 2023 Graz