GrazProvider

Provider component which configures various graz side effects. Graz uses @tanstack/react-query's features under the hood, hence you need to wrap GrazProvider with QueryClientProvider.

Performance

Graz is highly optimized with built-in caching, request deduplication, and efficient state management. See the Performance Guide for optimization tips and best practices.

Usage

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { GrazProvider, WalletType } from "graz";

const queryClient = new QueryClient();

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

const sommelier = {
  chainId: "sommelier-1",
  chainName: "Sommelier",
  // ... rest of sommelier ChainInfo
};

// example next.js application in _app.tsx
export default function CustomApp({ Component, pageProps }: AppProps) {
  const onNotFound = () => {
    console.log("not found");
  };

  return (
    <QueryClientProvider queryClient={queryClient}>
      <GrazProvider
        grazOptions={{
          chains: [cosmoshub, sommelier],
          chainsConfig: {
            "cosmoshub-4": {
              gas: {
                price: "",
                denom: "",
              },
            },
            "sommelier-1": {
              gas: {
                price: "",
                denom: "",
              },
            },
          },
          defaultWallet: WalletType.LEAP,
          onNotFound,
          multiChainFetchConcurrency: 6,
          // ...
        }}
      >
        <Component {...pageProps} />
      </GrazProvider>
    </QueryClientProvider>
  );
}

Params

grazOptions

  {
    chains?: ChainInfo[]; // Optional: chains can also be added dynamically via useSuggestChain
    chainsConfig?: Record<string, ChainConfig>
    defaultWallet?: WalletType; // default to `WalletType.KEPLR`
    onNotFound?: () => void;
    autoReconnect?: boolean; // Defaults to true, will try to reconnect when initial start(session empty)
    onReconnectFailed?: () => void;
    walletConnect?: WalletConnectStore | null;
    multiChainFetchConcurrency?: number // Multi-chain request concurrency limit. Defaults to 3 for optimal performance.
    iframeOptions?: {
      // for integrating using WalletType.COSMIFRAME
      allowedIframeParentOrigins: string[]
      autoConnect?: boolean
    }
    paraConfig?: ParaGrazConfig; // Configuration for Para embedded wallet (see Para integration guide)
    walletDefaultOptions?: KeplrIntereactionOptions; // Default options for wallet interactions
  }

Dynamic Chain Support

While you can configure chains upfront in the chains array, you can also add chains dynamically using useSuggestChain or useSuggestChainAndConnect. When you suggest a chain that's not in the provider, it will automatically be added to the internal store, eliminating the need to pre-configure all chains.

Types

WalletConnectStore

interface ChainConfig {
  path?: string;
  rpcHeaders?: Dictionary;
  gas?: {
    price: string;
    denom: string;
  };
}

Para Configuration

For Para embedded wallet integration, pass a paraConfig object:

interface ParaGrazConfig {
  paraWeb: ParaWeb; // Para SDK client instance
  connectorClass: typeof ParaGrazConnector; // Required: Connector implementation
  events?: ParaGrazConnectorEvents; // Optional lifecycle callbacks
  noModal?: boolean; // Optional: Skip modal UI
  modalProps?: ParaModalProps; // Optional: Customize modal appearance
  queryClient?: QueryClient; // Optional: Share QueryClient with Para
}

Important: You must provide connectorClass explicitly. Install @getpara/graz-integration and pass ParaGrazConnector.

See the Para Integration Guide for detailed setup instructions.