@cosmos-kit/leap-capsule-social-login

Cosmos Kit is a universal 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 be BETA for Development and Testing, and PROD 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 and NEXT_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();
          }
        }
      />
    </>
  );
}

Interchain JavaScript Stack

A unified toolkit for building applications and smart contracts in the Interchain ecosystem ⚛️

Category	Tools	Description
Chain Information	Chain Registry, Utils, Client	Everything from token symbols, logos, and IBC denominations for all assets you want to support in your application.
Wallet Connectors	Interchain Kitbeta, Cosmos Kit	Experience the convenience of connecting with a variety of web3 wallets through a single, streamlined interface.
Signing Clients	InterchainJSbeta, CosmJS	A single, universal signing interface for any network
SDK Clients	Telescope	Your Frontend Companion for Building with TypeScript with Cosmos SDK Modules.
Starter Kits	Create Interchain Appbeta, Create Cosmos App	Set up a modern Interchain app by running one command.
UI Kits	Interchain UI	The Interchain Design System, empowering developers with a flexible, easy-to-use UI kit.
Testing Frameworks	Starship	Unified Testing and Development for the Interchain.
TypeScript Smart Contracts	Create Hyperweb App	Build and deploy full-stack blockchain applications with TypeScript
CosmWasm Contracts	CosmWasm TS Codegen	Convert your CosmWasm smart contracts into dev-friendly TypeScript classes.

Credits

🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to our github ⚛️

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, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.