Graz provides a set of React hooks for interacting with Cosmos-based applications. This guide shows how to combine Graz’s hooks with Leap Social Login for a seamless authentication experience.

​
Prerequisites

Before you begin, ensure you have:

If you haven’t set up Capsule authentication yet, complete one of our authentication tutorials first and return to this guide when you’re ready to implement Graz integration.

​
Installation

Install the required packages using your preferred package manager:

​
Setup

​
1. Import Required Dependencies

import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
// Required import for Leap Social Login UI styles
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";
import { useCapsule } from "graz";

​
Implementation

Here’s a complete example of implementing Graz with Leap Social Login:

import React, { useState } from "react";
import { CustomCapsuleModalView } from "@leapwallet/cosmos-social-login-capsule-provider-ui";
import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
import { OAuthMethod } from "@usecapsule/web-sdk";
import { useCapsule } from "graz";

const GrazLogin: React.FC = () => {
  const {
    client, // Use this instead of importing capsuleClient
    modalState,
    setModalState,
    onAfterLoginSuccessful,
    onLoginFailure,
  } = useCapsule();

  const handleLoginSuccess = async () => {
    setModalState(false);
    onAfterLoginSuccessful?.();
  };

  const handleLoginFailure = () => {
    setModalState(false);
    onLoginFailure?.();
  };

  return (
    <div className="leap-ui">
      <button onClick={() => setModalState(true)}>Login with Graz</button>

      <CustomCapsuleModalView
        capsule={client} // Important: Use client from useCapsule hook
        showCapsuleModal={modalState}
        setShowCapsuleModal={setModalState}
        theme="light"
        onAfterLoginSuccessful={handleLoginSuccess}
        onLoginFailure={handleLoginFailure}
        oAuthMethods={Object.values(OAuthMethod)}
      />
    </div>
  );
};

export default GrazLogin;

​
Important Implementation Notes

​
Working with Graz Hooks

Graz provides additional hooks for interacting with the connected wallet:

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

function MyComponent() {
  const { account, isConnected } = useAccount();
  const { connect } = useConnect();
  const { disconnect } = useDisconnect();

  // Get account info
  console.log("Connected account:", account?.bech32Address);

  // Check connection status
  console.log("Is connected:", isConnected);

  // Connect or disconnect
  const handleConnect = () => connect();
  const handleDisconnect = () => disconnect();
}

For alternative integration options, check out:

Was this page helpful?

Cosmos KitMigration Guide