update capsule version

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": false,
+  "trailingComma": "all"
+}

components/WalletButton.tsx

@@ -8,13 +8,17 @@ import { useEffect, useState } from "react";
 import { formatNumber, fromSmall } from "../config/mathutils";
 import { IoMdCloseCircle } from "react-icons/io";
 
-interface WalletButtonOptions { 
-  balance?: string | null, openEmbeddedWalletModal: Function 
+interface WalletButtonOptions {
+  balance?: string | null;
+  openEmbeddedWalletModal: Function;
 }
 
-export function WalletButton({ balance, openEmbeddedWalletModal }: WalletButtonOptions) {
+export function WalletButton({
+  balance,
+  openEmbeddedWalletModal,
+}: WalletButtonOptions) {
   const { openView, status, address, chain, disconnect } = useChain("stargaze");
-  console.log(address) // leave it for debugging
+  console.log(address); // leave it for debugging
   let text = "Connect Wallet";
   if (status === "Connected") {
     text = sliceAddress(address ?? "");
@@ -25,18 +29,15 @@ export function WalletButton({ balance, openEmbeddedWalletModal }: WalletButtonO
   return (
     <div className="flex items-center gap-2 h-10 justify-between border bg-white-100 border-white-100 rounded-3xl px-5 py-2">
       <button
-        onClick={() => { 
-          if(status === 'Connected') { 
+        onClick={() => {
+          if (status === "Connected") {
             openEmbeddedWalletModal();
-          }
-          else {
+          } else {
             openView();
           }
-
-      }}
+        }}
         disabled={status === "Connecting"}
         className="flex items-center gap-2 justify-between "
-
       >
         <Image
           color="#000"
@@ -72,7 +73,7 @@ export function WalletButton({ balance, openEmbeddedWalletModal }: WalletButtonO
         </div>
       </button>
       {status === "Connected" && (
-        <button onClick={()=>disconnect()}>
+        <button onClick={() => disconnect()}>
           <span title="Disconnect Wallet">
             <IoMdCloseCircle size={16} title="Disconnect Wallet" />
           </span>

next.config.js

@@ -7,9 +7,12 @@ const nextConfig = {
     unoptimized: true,
   },
   transpilePackages: [
-    '@leapwallet/cosmos-social-login-capsule-provider-ui',
-    '@leapwallet/cosmos-social-login-capsule-provider'
+    "@leapwallet/cosmos-social-login-capsule-provider-ui",
+    "@leapwallet/cosmos-social-login-capsule-provider",
+    "@usecapsule/user-management-client",
+    "@usecapsule/core-sdk",
+    "@usecapsule/web-sdk",
   ],
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -23,13 +23,13 @@
     "@cosmos-kit/core": "2.6.6",
     "@cosmos-kit/cosmostation": "2.3.11",
     "@cosmos-kit/keplr": "2.3.13",
-    "@cosmos-kit/leap": "2.3.10",
-    "@cosmos-kit/leap-capsule-social-login": "0.6.0",
+    "@cosmos-kit/leap": "2.12.2",
+    "@cosmos-kit/leap-capsule-social-login": "0.10.2",
     "@cosmos-kit/react": "2.8.4",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@leapwallet/cosmos-social-login-capsule-provider": "0.0.33",
-    "@leapwallet/cosmos-social-login-capsule-provider-ui": "0.0.50",
+    "@leapwallet/cosmos-social-login-capsule-provider": "0.0.40",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "0.0.57",
     "@leapwallet/embedded-wallet-sdk-react": "0.3.7",
     "@types/bignumber.js": "^5.0.0",
     "@urql/exchange-graphcache": "^6.4.0",

pages/_app.tsx

@@ -1,6 +1,8 @@
 import "../styles/globals.css";
 import "../styles/modal.css";
-import "@leapwallet/embedded-wallet-sdk-react/styles.css"
+import "@leapwallet/embedded-wallet-sdk-react/styles.css";
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
+
 import type { AppProps } from "next/app";
 import { ChainProvider, useChain } from "@cosmos-kit/react";
 import { wallets as keplrWallets } from "@cosmos-kit/keplr";
@@ -17,6 +19,7 @@ import { Wallet } from "@cosmos-kit/core";
 import ConnectWalletSideCurtain from "../components/ConnectWalletSideCurtain/connectWalletSideCurtain";
 import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
+import { OAuthMethod } from "@leapwallet/cosmos-social-login-capsule-provider";
 
 if (typeof global.self === "undefined") {
   (global as any).self = global;
@@ -29,10 +32,18 @@ const updatedChains = chains.map((chain) => {
       apis: {
         ...chain.apis,
         rest: [
-          { address: process.env.NEXT_PUBLIC_NODE_REST_ENDPOINT || "https://rest.stargaze-apis.com/" },
+          {
+            address:
+              process.env.NEXT_PUBLIC_NODE_REST_ENDPOINT ||
+              "https://rest.stargaze-apis.com/",
+          },
         ].concat(chain.apis?.rest ?? []),
         rpc: [
-          { address: process.env.NEXT_PUBLIC_NODE_REST_ENDPOINT || "https://rpc.stargaze-apis.com/" },
+          {
+            address:
+              process.env.NEXT_PUBLIC_NODE_REST_ENDPOINT ||
+              "https://rpc.stargaze-apis.com/",
+          },
         ].concat(chain.apis?.rpc ?? []),
       },
     };
@@ -44,35 +55,29 @@ const updatedChains = chains.map((chain) => {
 function CreateCosmosApp({ Component, pageProps }: AppProps) {
   const [cosmosCapsuleWallet, setCosmosCapsuleWallet] =
     useState<LeapCapsuleWallet>();
-  const [wallets, setWallets] = useState()
-
+  const [wallets, setWallets] = useState();
 
   useEffect(() => {
     const fn = async () => {
       if (!cosmosCapsuleWallet) {
         const WalletClass = await import(
           "@cosmos-kit/leap-capsule-social-login"
         ).then((m) => m.LeapCapsuleWallet);
-        const WalletInfo: Wallet = await import("../leap-social-login/registry").then(
-          (m) => m.LeapCapsuleInfo,
-        );
+        const WalletInfo: Wallet = await import(
+          "../leap-social-login/registry"
+        ).then((m) => m.LeapCapsuleInfo);
         const cosmosCapsuleWallet = new WalletClass(WalletInfo);
         setCosmosCapsuleWallet(cosmosCapsuleWallet);
         // @ts-ignore: Disabling typecheck until we figureout proper way of adding cosmoscapsulewallet in cosmos-kit
-        setWallets([
-          cosmosCapsuleWallet,
-          ...keplrWallets,
-          ...leapWallets,
-        ]);
+        setWallets([cosmosCapsuleWallet, ...keplrWallets, ...leapWallets]);
       }
     };
 
     fn();
   });
 
-
   if (!cosmosCapsuleWallet) {
-    return <>Loading</>
+    return <>Loading</>;
   }
 
   return (
@@ -92,7 +97,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
             wallets={wallets}
             walletConnectOptions={{
               signClient: {
-                projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || '',
+                projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID || "",
                 relayUrl: "wss://relay.walletconnect.org",
                 metadata: {
                   name: "Bad Kids Shop",
@@ -103,21 +108,17 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
               },
             }}
           >
+            {!!cosmosCapsuleWallet && <CustomCapsuleModalViewX />}
             <Component {...pageProps} />
-            {!!cosmosCapsuleWallet && (
-              <CustomCapsuleModalViewX />
-            )}
           </ChainProvider>
         </LeapUiTheme>
-
       </GraphqlProvider>
     </>
   );
 }
 
 export default CreateCosmosApp;
 
-
 const CCUI = dynamic(
   () =>
     import("@leapwallet/cosmos-social-login-capsule-provider-ui").then(
@@ -126,7 +127,6 @@ const CCUI = dynamic(
   { ssr: false },
 );
 
-
 const TransactionSigningModal = dynamic(
   () =>
     import("@leapwallet/cosmos-social-login-capsule-provider-ui").then(
@@ -137,37 +137,24 @@ const TransactionSigningModal = dynamic(
 
 export function CustomCapsuleModalViewX() {
   const [showCapsuleModal, setShowCapsuleModal] = useState(false);
-  const [oAuthMethods, setOAuthMethods] = useState<Array<any>>([]);
-  useEffect(() => {
-    import("@leapwallet/cosmos-social-login-capsule-provider").then(
-      (capsuleProvider) => {
-        setOAuthMethods([
-          capsuleProvider.OAuthMethod.GOOGLE,
-          capsuleProvider.OAuthMethod.FACEBOOK,
-          capsuleProvider.OAuthMethod.TWITTER,
-        ]);
-      }
-    );
-  }, []);
-
 
   return (
-    <>
+    <div className="leap-ui dark !z-[99999] fixed">
       <CCUI
+        onAfterLoginSuccessful={() => {}}
+        onLoginFailure={() => {}}
         showCapsuleModal={showCapsuleModal}
         setShowCapsuleModal={setShowCapsuleModal}
-        theme={'dark'}
-        onAfterLoginSuccessful={() => {
-          window.successFromCapsuleModal();
-        }}
-        onLoginFailure={
-          () => {
-            window.failureFromCapsuleModal();
-          }
-        }
-        oAuthMethods={oAuthMethods}
+        theme={"dark"}
+        oAuthMethods={[
+          OAuthMethod.GOOGLE,
+          OAuthMethod.APPLE,
+          OAuthMethod.TWITTER,
+          OAuthMethod.DISCORD,
+        ]}
+        appName="Social Logins Demo"
       />
       <TransactionSigningModal dAppInfo={{ name: "Bad Kids Shop" }} />
-    </>
+    </div>
   );
 }