@cosmos-kit/leap-capsule-social-login
v0.10.2
Published
cosmos-kit wallet connector
Downloads
149
Readme
@cosmos-kit/leap-capsule-social-login
Cosmos Kit is a univeral wallet adapter for developers to build apps that quickly and easily interact with Cosmos blockchains and wallets.
@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 package for UI.
This plugin uses Capsule for MPC based key management. In order to make this work, you'll need an API key which you can request here
Once you have an API Key, include it in
CAPSULE_API_KEY
.CAPSULE_ENV
will beBETA
for Development and Testing, andPROD
for Production. Once you are ready to release to Production, ping the Capsule team to get a separate API Key for Production.
NextJS
For nextjs we recommend to load the module dynamic or async as it is not yet supporting SSR.
When you build it, please include environment variables
NEXT_PUBLIC_CAPSULE_API_KEY
andNEXT_PUBLIC_CAPSULE_ENV
as mentioned above. For further reference on Capsule, please reference the Capsule Developer Documentation
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: {},
},
],
},
},
}}
>
<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();
}
}
/>
</>
);
}
Related
Checkout these related projects:
- @cosmwasm/ts-codegen for generated CosmWasm contract Typescript classes
- @cosmology/telescope a "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs.
- chain-registry an npm module for the official Cosmos chain-registry.
- cosmos-kit A wallet connector for the Cosmos ⚛️
- create-cosmos-app set up a modern Cosmos app by running one command.
- starship a k8s-based unified development environment for Cosmos Ecosystem
Credits
🛠 Built by Cosmology — if you like our tools, please consider delegating to our validator ⚛️
Disclaimer
AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code or CLI, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.