Merge pull request #473 from karancoder/kjivani/cosmos-social-logins-…

…theme-update Leap Cosmos social logins package update + Theme update
cosmology-tech · Jun 18, 2024 · 2606d7f · 2606d7f
2 parents cbfed5d + a472d34
commit 2606d7f
Show file tree

Hide file tree

Showing 6 changed files with 431 additions and 992 deletions.
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -46,7 +46,7 @@
     "@cosmos-kit/vectis": "^2.10.0",
     "@cosmos-kit/web3auth": "^2.9.0",
     "@interchain-ui/react": "^1.23.13",
-    "@leapwallet/cosmos-social-login-capsule-provider-ui": "0.0.49",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "0.0.55",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",

diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -1,38 +1,40 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable unused-imports/no-unused-imports */
 import "bootstrap/dist/css/bootstrap.min.css";
+import "@leapwallet/cosmos-social-login-capsule-provider-ui/styles.css";
 import "../style/global.css";
 import "@interchain-ui/react/styles";
 
 import { Chain } from "@chain-registry/types";
 import { Decimal } from "@cosmjs/math";
 import { GasPrice } from "@cosmjs/stargate";
+import { wallets as cdcwalletWallets } from "@cosmos-kit/cdcwallet";
 import { wallets as coin98Wallets } from "@cosmos-kit/coin98";
 import { ChainName } from "@cosmos-kit/core";
 import { MainWalletBase } from "@cosmos-kit/core";
 import { wallets as cosmostationWallets } from "@cosmos-kit/cosmostation";
 import { wallets as exodusWallets } from "@cosmos-kit/exodus";
 import { wallets as finWallets } from "@cosmos-kit/fin";
 import { wallets as frontierWallets } from "@cosmos-kit/frontier";
+import { wallets as galaxyStationWallets } from "@cosmos-kit/galaxy-station";
 import { wallets as keplrWallets } from "@cosmos-kit/keplr";
-import { wallets as owalletWallets } from "@cosmos-kit/owallet";
 import { wallets as leapWallets } from "@cosmos-kit/leap";
 import { wallets as snapWallet } from "@cosmos-kit/leap-metamask-cosmos-snap";
 import { wallets as ledgerWallets } from "@cosmos-kit/ledger";
 import { wallets as ninjiWallets } from "@cosmos-kit/ninji";
 import { wallets as omniWallets } from "@cosmos-kit/omni";
+import { wallets as owalletWallets } from "@cosmos-kit/owallet";
 // Show how to custom modal views
 import { ChainProvider, defaultModalViews } from "@cosmos-kit/react";
 // import { ChainProvider } from "@cosmos-kit/react";
 import { wallets as shellWallets } from "@cosmos-kit/shell";
 import { wallets as stationWallets } from "@cosmos-kit/station";
-import { wallets as galaxyStationWallets } from "@cosmos-kit/galaxy-station";
 import { wallets as tailwindWallet } from "@cosmos-kit/tailwind";
 import { wallets as trustWallets } from "@cosmos-kit/trust";
 import { wallets as vectisWallets } from "@cosmos-kit/vectis";
 // import { makeWeb3AuthWallets } from "@cosmos-kit/web3auth";
 import { wallets as xdefiWallets } from "@cosmos-kit/xdefi";
-import { wallets as cdcwalletWallets } from "@cosmos-kit/cdcwallet";
+import { useTheme } from "@interchain-ui/react";
 import { assets, chains } from "chain-registry";
 import type { AppProps } from "next/app";
 import dynamic from "next/dynamic";
@@ -199,16 +201,24 @@ const LeapSocialLogin = dynamic(
 
 export function CustomCapsuleModalViewX() {
   const [showCapsuleModal, setShowCapsuleModal] = useState(false);
-  const [oAuthMethods, setOAuthMethods] = useState<Array<any>>([])
+  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])
-    })
-  }, [])
+    import("@leapwallet/cosmos-social-login-capsule-provider").then(
+      (capsuleProvider) => {
+        setOAuthMethods([
+          capsuleProvider.OAuthMethod.GOOGLE,
+          capsuleProvider.OAuthMethod.FACEBOOK,
+          capsuleProvider.OAuthMethod.TWITTER,
+        ]);
+      }
+    );
+  }, []);
+
+  const { theme } = useTheme();
 
   return (
-    <>
+    <div className={`leap-ui z-[9999] fixed ${theme === "dark" ? "dark" : ""}`}>
       <LeapSocialLogin
         showCapsuleModal={showCapsuleModal}
         setShowCapsuleModal={setShowCapsuleModal}
@@ -224,6 +234,6 @@ export function CustomCapsuleModalViewX() {
         appName="CosmosKit"
         oAuthMethods={oAuthMethods}
       />
-    </>
+    </div>
   );
 }
diff --git a/packages/example/style/global.css b/packages/example/style/global.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root,
+  :root .leap-ui {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
@@ -36,7 +37,8 @@
     --radius: 0.5rem;
   }
 
-  .dark {
+  .dark,
+  .leap-ui.dark {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
 

diff --git a/wallets/leap-capsule-social-login/package.json b/wallets/leap-capsule-social-login/package.json
@@ -61,7 +61,7 @@
   "dependencies": {
     "@chain-registry/keplr": "1.64.4",
     "@cosmos-kit/core": "^2.12.0",
-    "@leapwallet/cosmos-social-login-capsule-provider": "0.0.32"
+    "@leapwallet/cosmos-social-login-capsule-provider": "0.0.38"
   },
   "peerDependencies": {
     "@cosmjs/amino": ">= 0.28",

diff --git a/wallets/leap-capsule-social-login/src/main-wallet.ts b/wallets/leap-capsule-social-login/src/main-wallet.ts
@@ -1,9 +1,12 @@
-import { Wallet } from "@cosmos-kit/core";
-import { MainWalletBase } from "@cosmos-kit/core";
+import { Wallet } from '@cosmos-kit/core';
+import { MainWalletBase } from '@cosmos-kit/core';
+import {
+  CapsuleEnvironment,
+  CapsuleProvider,
+} from '@leapwallet/cosmos-social-login-capsule-provider';
 
-import { ChainCosmosSocial } from "./chain-wallet";
-import { CosmosCapsuleClient } from "./client";
-import { CapsuleProvider, CapsuleEnvironment } from "@leapwallet/cosmos-social-login-capsule-provider";
+import { ChainCosmosSocial } from './chain-wallet';
+import { CosmosCapsuleClient } from './client';
 
 export class LeapCapsuleWallet extends MainWalletBase {
   constructor(walletInfo: Wallet) {
@@ -13,7 +16,27 @@ export class LeapCapsuleWallet extends MainWalletBase {
   async initClient() {
     this.initingClient();
     try {
-      this.initClientDone(new CosmosCapsuleClient({ loginProvider: new CapsuleProvider({ apiKey: process.env.CAPSULE_KEY || process.env.NEXT_PUBLIC_CAPSULE_KEY, env: process.env.CAPSULE_ENV || process.env.NEXT_PUBLIC_CAPSULE_ENV as unknown as CapsuleEnvironment }) }));
+      this.initClientDone(
+        new CosmosCapsuleClient({
+          loginProvider: new CapsuleProvider({
+            apiKey:
+              process.env.CAPSULE_KEY || process.env.NEXT_PUBLIC_CAPSULE_KEY,
+            env:
+              process.env.CAPSULE_ENV ||
+              (process.env
+                .NEXT_PUBLIC_CAPSULE_ENV as unknown as CapsuleEnvironment),
+            opts: {
+              emailPrimaryColor: '#29a873',
+              homepageUrl: 'https://www.leapwallet.io',
+              portalTheme: {
+                backgroundColor: '#141414',
+                foregroundColor: '#29a873',
+                borderRadius: 'sm',
+              },
+            },
+          }),
+        })
+      );
     } catch (error) {
       this.initClientError(error as Error);
     }