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

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

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}
    />
  );
};