Warning: The Leap Social Login SDKs provided by the Leap Team are no longer in active development. We recommend using the ParaModal with Cosmos External Wallets for a more seamless experience. You can find more details in the ParaModal with Cosmos External Wallets guide for more information.

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 Para 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:

npm install @leapwallet/cosmos-social-login-provider-ui graz @getpara/web-sdk

​
Setup

​
1. Import Required Dependencies

import { CustomParaModalView } from "@leapwallet/cosmos-social-login-para-provider-ui";
// Required import for Leap Social Login UI styles
import "@leapwallet/cosmos-social-login-para-provider-ui/styles.css";
import { OAuthMethod } from "@getpara/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 { CustomParaModalView } from "@leapwallet/cosmos-social-login-para-provider-ui";
import "@leapwallet/cosmos-social-login-para-provider-ui/styles.css";
import { OAuthMethod } from "@getpara/web-sdk";
import { useCapsule } from "graz";

const GrazLogin: React.FC = () => {
  const {
    client, // Use this instead of importing para
    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>

      <CustomParaModalView
        para={client} // Important: Use client from useCapsule hook
        showParaModal={modalState}
        setShowParaModal={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: