Graz: React hooks for Cosmos

by React

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

Features

  • ? 8+ hooks for interfacing with Keplr Wallet (connecting, view balances, etc.)
  • ? Built-in caching, request deduplication, and all the good stuff from react-query and zustand
  • ? Auto refresh on wallet and network change
  • ? Fully typed and tree-shakeable
  • …and many more ✨

Installing 

# using npm
npm install graz

# using yarn
yarn add graz

Quick start

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

import { GrazProvider } from "graz";

function App() {
  return (
    <GrazProvider>
      <Wallet />
    </GrazProvider>
  );
}

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

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

  function handleConnect() {
    return isConnected ? disconnect(undefined) : connect(defaultChains.cosmos);
  }

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

View an example app at https://graz-example.vercel.app

API

Read more on available hooks and other imports at API.md.

Maintainers

License

MIT License, Copyright (c) 2022 Strangelove Ventures

GitHub

View Github