@cosmos-kit/leap-capsule-social-login
@cosmos-kit/leap-capsule-social-login
is the social login integration for CosmosKit using @leapwallet/cosmos-social-login-capsule-provider
You need install @leapwallet/cosmos-social-login-capsule-provider-ui (opens in a new tab) package for UI.
When you build it please have the environment variables
CAPSULE_API_KEY
andCAPSULE_ENV
which you can request from here (opens in a new tab)
NextJS
For nextjs we recommend to load the module dynamic or async as it is not yet supporting SSR.
When you build it please have the environment variables
NEXT_PUBLIC_CAPSULE_API_KEY
andNEXT_PUBLIC_CAPSULE_ENV
which you can request from here (opens in a new tab)
In next.config.js
transpilePackages: ["@cosmos-kit/leap-social-login", "@leapwallet/capsule-web-sdk-lite", "@leapwallet/cosmos-social-login-capsule-provider"],
For example
function MyApp({ Component, pageProps }: AppProps) {
const defaultWallets: MainWalletBase[] = [...keplrWallets, ...leapWallets];
const [wallets, setWallets] = useState<MainWalletBase[]>(defaultWallets)
const [loadingWallets, setLoadingWallet] = useState<boolean>(false);
useEffect(() => {
setLoadingWallet(true)
import("@cosmos-kit/leap-capsule-social-login").then(
(CapsuleModule) => {
return CapsuleModule.wallets;
},
).then((leapSocialLogin) => {
setWallets([...keplrWallets, ...leapWallets, ...leapSocialLogin])
setLoadingWallet(false);
})
}, [])
if (loadingWallets) {
return <>Loading...</>
}
return (
<RootLayout>
<ChainProvider
chains={chains}
assetLists={[...assets]}
wallets={wallets}
throwErrors={false}
subscribeConnectEvents={false}
defaultNameService={"stargaze"}
logLevel={"DEBUG"}
endpointOptions={{
isLazy: true,
endpoints: {
cosmoshub: {
rpc: [
{
url: "https://rpc.cosmos.directory/cosmoshub",
headers: {},
},
],
},
},
}}
disableIframe={false}
>
<Component {...pageProps} />
</ChainProvider>
<CustomCapsuleModalViewX />
</RootLayout>
);
}
export default MyApp;
const LeapSocialLogin = dynamic(
() =>
import("@leapwallet/cosmos-social-login-capsule-provider-ui").then(
(m) => m.CustomCapsuleModalView,
),
{ ssr: false },
);
export function CustomCapsuleModalViewX() {
const [showCapsuleModal, setShowCapsuleModal] = useState(false);
useEffect(() => {
window.openCapsuleModal = () => {
setShowCapsuleModal(true);
}
}, [])
return (
<>
<LeapSocialLogin
showCapsuleModal={showCapsuleModal}
setShowCapsuleModal={setShowCapsuleModal}
theme={'dark'}
onAfterLoginSuccessful={() => {
window.successFromCapsuleModal();
}}
onLoginFailure={
() => {
window.failureFromCapsuleModal();
}
}
/>
</>
);
}