Capsule integration (#146)

docs/docs/change-log.md

@@ -4,6 +4,13 @@ sidebar_position: 8
 
 # Changelog
 
+## Version 0.1.6
+
+- Added capsule wallet integration
+- `walletDefaultOptions` param in `GrazProvider` for setting default options for wallet.
+- Added `useCapsule` hook for leap login capsule ui
+- `denom` in `useBalance` param is now optional
+
 ## Version 0.1.5
 
 - Fix typing on SigningClient hooks for single chain `opts` param

docs/docs/guides/integrate-capsule.md

@@ -0,0 +1,40 @@
+# Integrate Capsule
+
+## Install Leap Login Capsule UI
+
+```bash
+yarn add @leapwallet/cosmos-social-login-capsule-provider-ui
+```
+
+## Example Next JS
+
+For Next JS we recommend to load the module dynamically to avoid SSR issues. And use `useCapsule` hook to get the client and other capsule related states.
+
+```javascript
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
+const HomePage = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+
+  return (
+    <div>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+      />
+    </div>
+  );
+};
+```
+
+Thats it, now you can use capsule as your wallet provider.

docs/docs/hooks/useCapsule.md

@@ -0,0 +1,44 @@
+# useCapsule
+
+Hook to interact with [@leapwallet/cosmos-social-login-capsule-provider-ui](https://www.npmjs.com/package/@leapwallet/cosmos-social-login-capsule-provider-ui)
+
+#### Usage
+
+```javascript
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
+const HomePage = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+
+  return (
+    <div>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+      />
+    </div>
+  );
+};
+```
+
+#### Return Value
+
+```tsx
+{
+  setModalState: (state: boolean) => void;
+  modalState: boolean;
+  client: CapsuleProvider | null;
+  onAfterLoginSuccessful: (() => Promise<void>) | undefined;
+  onLoginFailure: () => void;
+}
+```

example/next/package.json

@@ -12,6 +12,8 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.30",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.47",
     "framer-motion": "^10.16.4",
     "graz": "*",
     "next": "^13.4.19",

example/next/pages/_app.tsx

@@ -21,6 +21,10 @@ const CustomApp: NextPage<AppProps> = ({ Component, pageProps }) => {
               projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
             },
           },
+          capsuleConfig: {
+            apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
+            env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
+          },
         }}
       >
         <Component {...pageProps} />

example/next/pages/index.tsx

@@ -1,16 +1,24 @@
-import { Center, HStack, Spacer, Stack, Text } from "@chakra-ui/react";
-import { useAccount } from "graz";
+import { Center, HStack, Spacer, Stack, Text, useColorMode } from "@chakra-ui/react";
+import { useAccount, useCapsule } from "graz";
 import type { NextPage } from "next";
+import dynamic from "next/dynamic";
 import { BalanceList } from "ui/balance-list";
 import { ChainSwitcher } from "ui/chain-switcher";
 import { ConnectButton } from "ui/connect-button";
 import { ConnectStatus } from "ui/connect-status";
 import { ToggleTheme } from "ui/toggle-theme";
 
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
 const HomePage: NextPage = () => {
   const { data: accountData } = useAccount({
     chainId: "cosmoshub-4",
   });
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+  const { colorMode } = useColorMode();
   return (
     <Center minH="100vh">
       <Stack bgColor="whiteAlpha.100" boxShadow="md" maxW="md" p={4} rounded="md" spacing={4} w="full">
@@ -36,6 +44,18 @@ const HomePage: NextPage = () => {
           <ConnectButton />
         </HStack>
       </Stack>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          void onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+        theme={colorMode}
+      />
     </Center>
   );
 };

example/next/ui/connect-button.tsx

@@ -81,6 +81,7 @@ export const ConnectButton: FC = () => {
             {wallets.metamask_snap_leap ? (
               <Button onClick={() => handleConnect(WalletType.METAMASK_SNAP_LEAP)}>Metamask Snap Leap</Button>
             ) : null}
+            {wallets.capsule ? <Button onClick={() => handleConnect(WalletType.CAPSULE)}>Capsule</Button> : null}
           </Stack>
         </ModalContent>
       </Modal>

example/starter/src/pages/_app.tsx

@@ -29,6 +29,15 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
           },
         },
+        capsuleConfig: {
+          apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
+          env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
+        },
+        walletDefaultOptions: {
+          sign: {
+            preferNoSetFee: true,
+          },
+        },
       }}
     >
       <ChakraProvider resetCSS theme={theme}>

example/starter/src/pages/index.tsx

@@ -1,14 +1,38 @@
-import { Stack } from "@chakra-ui/react";
+import { Stack, useColorMode } from "@chakra-ui/react";
+import { useCapsule } from "graz";
+import dynamic from "next/dynamic";
 import { Card } from "src/ui/card/chain";
 import { mainnetChains } from "src/utils/graz";
 
+const LeapSocialLogin = dynamic(
+  () => import("@leapwallet/cosmos-social-login-capsule-provider-ui").then((m) => m.CustomCapsuleModalView),
+  { ssr: false },
+);
+
 const HomePage = () => {
+  const { client, modalState, onAfterLoginSuccessful, setModalState, onLoginFailure } = useCapsule();
+
+  const { colorMode } = useColorMode();
   return (
-    <Stack spacing={4}>
-      {mainnetChains.map((chain) => (
-        <Card key={chain.chainId} chain={chain} />
-      ))}
-    </Stack>
+    <>
+      <Stack spacing={4}>
+        {mainnetChains.map((chain) => (
+          <Card key={chain.chainId} chain={chain} />
+        ))}
+      </Stack>
+      <LeapSocialLogin
+        capsule={client?.getClient() || undefined}
+        onAfterLoginSuccessful={() => {
+          void onAfterLoginSuccessful?.();
+        }}
+        onLoginFailure={() => {
+          onLoginFailure();
+        }}
+        setShowCapsuleModal={setModalState}
+        showCapsuleModal={modalState}
+        theme={colorMode}
+      />
+    </>
   );
 };
 

example/starter/src/ui/modal/connect-wallet.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Heading,
   HStack,
+  Image,
   Modal,
   ModalBody,
   ModalContent,
@@ -52,7 +53,7 @@ const WalletModal = ({
                     p={4}
                     spacing={4}
                   >
-                    {/* <Image alt={wallet.name} boxSize="40px" src={wallet.imgSrc} /> */}
+                    <Image alt={wallet.name} boxSize="40px" src={wallet.imgSrc} />
                     <Text fontWeight="bold">{wallet.name}</Text>
                   </HStack>
                 ))}

example/starter/src/utils/graz.ts

@@ -57,4 +57,8 @@ export const listedWallets = {
     imgSrc: "/assets/wallet-icon-cosmostation.png",
     mobile: true,
   },
+  [WalletType.CAPSULE]: {
+    name: "Capsule",
+    imgSrc: "/assets/wallet-icon-capsule.jpg",
+  },
 };

packages/graz/package.json

@@ -47,7 +47,9 @@
     "@cosmjs/proto-signing": "*",
     "@cosmjs/stargate": "*",
     "@cosmjs/tendermint-rpc": "*",
-    "long": "*",
+    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.30",
+    "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.47",
+    "long": "^4",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -70,7 +72,7 @@
     "cac": "^6.7.14",
     "cosmos-directory-client": "0.0.6",
     "wadesta": "^0.0.5",
-    "zustand": "^4.4.1"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/node": "^18.17.15",

packages/graz/src/actions/account.ts

@@ -7,7 +7,7 @@ import { grazSessionDefaultValues, useGrazInternalStore, useGrazSessionStore } f
 import type { Maybe } from "../types/core";
 import type { WalletType } from "../types/wallet";
 import type { ChainId } from "../utils/multi-chain";
-import { checkWallet, getWallet, isWalletConnect } from "./wallet";
+import { checkWallet, getWallet, isCapsule, isWalletConnect } from "./wallet";
 
 export type ConnectArgs = Maybe<{
   chainId: ChainId;
@@ -26,14 +26,12 @@ export const connect = async (args?: ConnectArgs): Promise<ConnectResult> => {
     const { recentChainIds: recentChains, chains, walletType } = useGrazInternalStore.getState();
 
     const currentWalletType = args?.walletType || walletType;
-
     const isWalletAvailable = checkWallet(currentWalletType);
     if (!isWalletAvailable) {
       throw new Error(`${currentWalletType} is not available`);
     }
 
     const wallet = getWallet(currentWalletType);
-
     const chainIds = typeof args?.chainId === "string" ? [args.chainId] : args?.chainId || recentChains;
     if (!chainIds) {
       throw new Error("No last known connected chain, connect action requires chain ids");
@@ -60,7 +58,52 @@ export const connect = async (args?: ConnectArgs): Promise<ConnectResult> => {
 
     const { accounts: _account } = useGrazSessionStore.getState();
     await wallet.init?.();
+    if (
+      isCapsule(currentWalletType) &&
+      useGrazSessionStore.getState().capsuleClient &&
+      Object.values(useGrazSessionStore.getState().accounts || []).length > 0
+    ) {
+      const connectedChains = chainIds.map((x) => chains!.find((y) => y.chainId === x)!);
+      const _resAcc = useGrazSessionStore.getState().accounts;
+      useGrazSessionStore.setState({ status: "connecting" });
+
+      const key = await wallet.getKey(chainIds[0]!);
+      const resultAcccounts: Record<string, Key> = {};
+      chainIds.forEach((chainId) => {
+        resultAcccounts[chainId] = {
+          ...key,
+          bech32Address: toBech32(
+            chains!.find((x) => x.chainId === chainId)!.bech32Config.bech32PrefixAccAddr,
+            fromBech32(key.bech32Address).data,
+          ),
+        };
+      });
+      useGrazSessionStore.setState((prev) => ({
+        accounts: { ...(prev.accounts || {}), ...resultAcccounts },
+      }));
+
+      useGrazInternalStore.setState((prev) => ({
+        recentChainIds: [...(prev.recentChainIds || []), ...chainIds].filter((thing, i, arr) => {
+          return arr.indexOf(thing) === i;
+        }),
+      }));
+      useGrazSessionStore.setState((prev) => ({
+        activeChainIds: [...(prev.activeChainIds || []), ...chainIds].filter((thing, i, arr) => {
+          return arr.indexOf(thing) === i;
+        }),
+      }));
+      useGrazSessionStore.setState({
+        status: "connected",
+      });
+      return { accounts: _resAcc!, walletType: currentWalletType, chains: connectedChains };
+    }
     await wallet.enable(chainIds);
+    if (isCapsule(currentWalletType)) {
+      const connectedChains = chainIds.map((x) => chains!.find((y) => y.chainId === x)!);
+      const _resAcc = useGrazSessionStore.getState().accounts;
+      useGrazSessionStore.setState({ status: "connecting" });
+      return { accounts: _resAcc!, walletType: currentWalletType, chains: connectedChains };
+    }
     if (!isWalletConnect(currentWalletType)) {
       const key = await wallet.getKey(chainIds[0]!);
       const resultAcccounts: Record<string, Key> = {};

packages/graz/src/actions/chains.ts

@@ -1,7 +1,7 @@
 import type { ChainInfo } from "@keplr-wallet/types";
 
 import { useGrazInternalStore } from "../store";
-import type { WalletType } from "../types/wallet";
+import { WalletType } from "../types/wallet";
 import type { ConnectResult } from "./account";
 import { connect } from "./account";
 import { getWallet } from "./wallet";
@@ -34,7 +34,11 @@ export interface SuggestChainArgs {
 
 export const suggestChain = async ({ chainInfo, walletType }: SuggestChainArgs): Promise<ChainInfo> => {
   const wallet = getWallet(walletType);
-  await wallet.experimentalSuggestChain(chainInfo);
+  if (walletType === WalletType.CAPSULE) {
+    await connect({ chainId: chainInfo.chainId, walletType });
+  } else {
+    await wallet.experimentalSuggestChain(chainInfo);
+  }
   return chainInfo;
 };