Skip to main content

ParaGrazConfig

Configuration object for integrating Para embedded wallet with Graz.

Type Definition​

interface ParaGrazConfig {
  paraWeb: ParaWeb;
  connectorClass: new (config: ParaGrazConfig, chains?: ChainInfo[] | null) => ParaGrazConnector;
  events?: ParaGrazConnectorEvents;
  noModal?: boolean;
  modalProps?: ParaModalProps;
  queryClient?: QueryClient;
}

Properties​

paraWeb (required)​

  • Type: ParaWeb
  • Description: Instance of the Para SDK client created from @getpara/react-sdk-lite

Example:

import ParaWeb, { Environment } from "@getpara/react-sdk-lite";

const para = new ParaWeb(Environment.BETA, "your-api-key");

connectorClass (required)​

  • Type: new (config: ParaGrazConfig, chains?: ChainInfo[] | null) => ParaGrazConnector
  • Description: The Para connector class constructor. Must be provided explicitly to enable tree-shaking.

Example:

import { ParaGrazConnector } from "@getpara/graz-integration";

const paraConfig: ParaGrazConfig = {
  // ...
  connectorClass: ParaGrazConnector,
};
Why is this required?

By requiring you to explicitly provide the connector class, Graz can:

  • Avoid bundling Para dependencies when you're not using Para wallet (smaller bundle size)
  • Eliminate dynamic import issues and module resolution problems
  • Provide clearer error messages and better debugging experience
  • Enable better tree-shaking and build optimization

events (optional)​

  • Type: ParaGrazConnectorEvents
  • Description: Lifecycle event callbacks for the Para connector

Example:

const paraConfig: ParaGrazConfig = {
  // ...
  events: {
    onEnabled: (chainIds, connector) => {
      console.log("Para enabled for chains:", chainIds);
    },
  },
};

noModal (optional)​

  • Type: boolean
  • Default: false
  • Description: If true, skip showing the Para modal UI for authentication

modalProps (optional)​

  • Type: ParaModalProps
  • Description: Customize the appearance and behavior of the Para authentication modal

Example:

const paraConfig: ParaGrazConfig = {
  // ...
  modalProps: {
    appName: "My Cosmos App",
    // Additional modal customization options
  },
};

See Para documentation for all modal customization options.

queryClient (optional)​

  • Type: QueryClient (from @tanstack/react-query)
  • Description: Share your app's QueryClient instance with Para's internal provider

Example:

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

const paraConfig: ParaGrazConfig = {
  // ...
  queryClient,
};

Usage Example​

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { GrazProvider, type ParaGrazConfig } from "graz";
import { ParaGrazConnector } from "@getpara/graz-integration";
import ParaWeb, { Environment } from "@getpara/react-sdk-lite";

const queryClient = new QueryClient();
const para = new ParaWeb(Environment.BETA, process.env.PARA_API_KEY!);

const paraConfig: ParaGrazConfig = {
  paraWeb: para,
  connectorClass: ParaGrazConnector,
  modalProps: { appName: "My App" },
  queryClient,
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <GrazProvider grazOptions={{ paraConfig }}>
        {/* Your app */}
      </GrazProvider>
    </QueryClientProvider>
  );
}

All Para types are re-exported from graz for convenience:

  • ParaWeb - Para SDK client interface (from @getpara/web-sdk)
  • ParaGrazConnector - Para wallet connector implementation (from @getpara/graz-integration)
  • ParaGrazConnectorEvents - Connector lifecycle events
  • ParaModalProps - Modal customization options
  • ParaWallet - Para wallet entity interface

See Also​