@leapwallet/cosmos-social-login-capsule-provider-ui
v0.0.59Custom 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}
/>
);
};
npm i @leapwallet/cosmos-social-login-capsule-provider-ui
Source Code
[email protected]:le...Metadata
- MIT
- Whatever
- Unknown
- released 10/5/2024