Skip to main content

Getting Started

Requirements​

graz requires react@>=17 due to using function components and hooks and the new JSX transform.

Installation​

Install graz

# using npm
npm install graz

# using yarn
yarn add graz

# using pnpm
pnpm add graz

Quick start​

1. Wrap app with <GrazProvider />​

import { GrazProvider } from "graz";

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

2. Configure grazOptions​

info

Optional You can configure your default chain, default wallet, default SigningClient

import { GrazProvider, mainnetChains } from "graz";

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

3. You're good to go!​

Use hooks! Every component inside the GrazProvider is now set up to use the graz hooks.

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>
  );
}