Custom Capsule ModalView

Overview

The CustomCapsuleModalView component is a customizable modal view for integrating the Capsule authentication and wallet creation flow into your React application. This component incorporates various steps such as email verification, biometric verification, and wallet creation.

Installation

To use the CustomCapsuleModalView component in your project, you need to install the required dependencies. Run the following command:

npm install @leapwallet/cosmos-social-login-provider-ui @leapwallet/cosmos-social-login-capsule-provider

Usage

Importing the Component

import CustomCapsuleModalView, {
  lightTheme,
  defaultTheme,
} from "@leapwallet/cosmos-social-login-provider-ui";

Rendering the Component

<CustomCapsuleModalView
  capsule={capsuleInstance}
  showCapsuleModal={showModal}
  setShowCapsuleModal={setShowModal}
  onAfterLoginSuccessful={handleAfterLogin}
  onLoginFailure={handleLoginFailure}
  theme="light" // Optional: Specify 'light' or 'dark' theme
/>

• capsule: An instance of the Capsule object.
• showCapsuleModal: A boolean indicating whether to show the Capsule modal.
• setShowCapsuleModal: A function to control the visibility of the Capsule modal.
• onAfterLoginSuccessful: A callback function to execute after successful login.
• onLoginFailure: A callback function to handle login failure.
• theme: (Optional) Specify the theme for the modal ('light' or 'dark').

Theming

The component supports light and dark themes, which can be specified using the theme prop. The default theme is dark, and the lightTheme and defaultTheme themes are provided for customization.

Example

import CustomCapsuleModalView from "@leapwallet/cosmos-social-login-provider-ui";
import { CapsuleProvider } from "@leapwallet/cosmos-social-login-capsule-provider";

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const capsuleInstance = new Capsule(); // Replace with your Capsule instance

  const handleAfterLogin = () => {
    // Handle actions after successful login
  };

  const handleLoginFailure = () => {
    // Handle actions on login failure
  };

  return (
    <CustomCapsuleModalView
      capsule={capsuleProvider?.getClient()}
      showCapsuleModal={showModal}
      setShowCapsuleModal={setShowModal}
      onAfterLoginSuccessful={handleAfterLogin}
      onLoginFailure={handleLoginFailure}
    />
  );
};