Feature Add leap social login

packages/core/src/manager.ts

@@ -81,15 +81,15 @@ export class WalletManager extends StateBase {
     // iframe is disabled.
     wallets = [
       ...((typeof window !== 'undefined' && window.parent === window.self) ||
-      disableIframe
+        disableIframe
         ? []
         : [iframeWallet]),
       ...wallets,
     ];
     wallets.forEach(
       ({ walletName }) =>
-        (this._reconnectMap[walletName] = () =>
-          this._reconnect(walletName, true))
+      (this._reconnectMap[walletName] = () =>
+        this._reconnect(walletName, true))
     );
     this.init(
       chains,
@@ -131,7 +131,7 @@ export class WalletManager extends StateBase {
       wallet.throwErrors = this.throwErrors;
       wallet.session = this.session;
       wallet.walletConnectOptions = this.walletConnectOptions;
-      wallet.setChains(this.chainRecords);
+      wallet?.setChains(this.chainRecords);
       return wallet;
     });
 

packages/docs/pages/integrating-wallets/leap-capsule-social-login.mdx

@@ -0,0 +1,118 @@
+# @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](https://www.npmjs.com/package/@leapwallet/cosmos-social-login-capsule-provider-ui) package for UI.
+
+> When you build it kindly have the environment vairables `CAPSULE_API_KEY` and  `CAPSULE_ENV` you can get it from [UseCapsule.com](https://usecapsule.com/)
+
+## NextJS
+
+For nextjs we recommend to load the module dynamic or async as it is not yet supporting SSR.
+
+> When you build it kindly have the environment vairables `NEXT_PUBLIC_CAPSULE_API_KEY` and  `NEXT_PUBLIC_CAPSULE_ENV` you can get it from [UseCapsule.com](https://usecapsule.com/)
+
+### In next.config.js
+
+>   transpilePackages: ["@cosmos-kit/leap-social-login", "@leapwallet/capsule-web-sdk-lite", "@leapwallet/cosmos-social-login-capsule-provider"],
+
+
+### For example
+
+```jsx
+
+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();
+          }
+        }
+      />
+    </>
+  );
+}
+```

packages/example/next.config.js

@@ -36,8 +36,9 @@ const path = require("path");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: { esmExternals: true },
   reactStrictMode: true,
-  transpilePackages: ["@cosmos-kit/web3auth"],
+  transpilePackages: ["@cosmos-kit/web3auth", "@cosmos-kit/leap-social-login", "@leapwallet/capsule-web-sdk-lite", "@leapwallet/cosmos-social-login-capsule-provider"],
   /**
    *
    * @param {import('webpack').Configuration} config

packages/example/package.json

@@ -36,6 +36,7 @@
     "@cosmos-kit/vectis": "^2.5.1",
     "@cosmos-kit/web3auth": "^2.4.11",
     "@interchain-ui/react": "^1.16.6",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.47",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -77,4 +78,4 @@
   "peerDependencies": {
     "@cosmjs/math": "0.29.0"
   }
-}
+}

packages/example/pages/_app.tsx

@@ -28,12 +28,18 @@ import { wallets as vectisWallets } from "@cosmos-kit/vectis";
 import { wallets as xdefiWallets } from "@cosmos-kit/xdefi";
 import { assets, chains } from "chain-registry";
 import type { AppProps } from "next/app";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 // import { CustomConnectedView } from "../components/custom-connected";
 import { RootLayout } from "../components/layout";
+import dynamic from "next/dynamic";
+import { MainWalletBase } from "@cosmos-kit/core";
+import { useTheme } from "@interchain-ui/react";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const defaultWallets: MainWalletBase[] = [...keplrWallets, ...leapWallets];
+  const [wallets, setWallets] = useState<MainWalletBase[]>(defaultWallets)
+  const [loadingWallets, setLoadingWallet] = useState<boolean>(false);
   // const web3AuthWallets = useMemo(
   //   () =>
   //     makeWeb3AuthWallets({
@@ -55,30 +61,29 @@ function MyApp({ Component, pageProps }: AppProps) {
   //   []
   // );
 
+  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={[
-          ...keplrWallets,
-          ...leapWallets,
-          // ...ninjiWallets,
-          // ...snapWallet,
-          // ...ledgerWallets,
-          // ...web3AuthWallets,
-          // ...trustWallets,
-          // ...stationWallets,
-          // ...cosmostationWallets,
-          // ...omniWallets,
-          // ...exodusWallets,
-          // ...shellWallets,
-          // ...vectisWallets,
-          // ...xdefiWallets,
-          // ...frontierWallets,
-          // ...coin98Wallets,
-          // ...finWallets,
-        ]}
+        wallets={wallets}
         throwErrors={false}
         subscribeConnectEvents={false}
         defaultNameService={"stargaze"}
@@ -131,21 +136,54 @@ function MyApp({ Component, pageProps }: AppProps) {
           },
         }}
         disableIframe={false}
-        // // ==== Custom base modal customization
-        // // modalTheme={{
-        // //   modalContentClassName: "my-custom-modal-content",
-        // }}
-        // // ==== Custom components
-        // // modalViews={{
-        // //   ...defaultModalViews,
-        // //   Connected: CustomConnectedView,
-        // // }}
-        // walletModal={CustomModal}
+      // // ==== Custom base modal customization
+      // // modalTheme={{
+      // //   modalContentClassName: "my-custom-modal-content",
+      // }}
+      // // ==== Custom components
+      // // modalViews={{
+      // //   ...defaultModalViews,
+      // //   Connected: CustomConnectedView,
+      // // }}
+      // walletModal={CustomModal}
       >
         <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);
+  const currenTtheme = useTheme()
+
+  return (
+    <>
+      <LeapSocialLogin
+        showCapsuleModal={showCapsuleModal}
+        setShowCapsuleModal={setShowCapsuleModal}
+        theme={currenTtheme.theme}
+        onAfterLoginSuccessful={() => {
+          window.successFromCapsuleModal();
+        }}
+        onLoginFailure={
+          () => {
+            window.failureFromCapsuleModal();
+          }
+        }
+      />
+    </>
+  );
+}

wallets/leap-capsule-social-login/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

wallets/leap-capsule-social-login/.eslintignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+main/
+module/
+types/
+coverage/
+/index.ts