feat: add compass wallet (#162)

docs/docs/change-log.md

@@ -4,6 +4,10 @@ sidebar_position: 8
 
 # Changelog
 
+## Version 0.1.19
+
+- Added Compass wallet integration
+
 ## Version 0.1.18
 
 - Added Wallet connect mobile clot integration

docs/docs/types/walletType.md

@@ -51,5 +51,6 @@ enum WalletType {
   XDEFI = "xdefi",
   CAPSULE = "capsule",
   COSMIFRAME = "cosmiframe",
+  COMPASS = "compass",
 }
 ```

example/next/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "export:docs": "next build && next export --outdir ../../docs/build/examples/next",
     "lint": "eslint --fix \"**/*.{ts,tsx}\"",
-    "start": "next start"
+    "start": "next start",
+    "postinstall": "graz generate -g"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.1",

example/next/ui/connect-button.tsx

@@ -89,6 +89,7 @@ export const ConnectButton: FC = () => {
             ) : null}
             {wallets.capsule ? <Button onClick={() => handleConnect(WalletType.CAPSULE)}>Capsule</Button> : null}
             {wallets.cosmiframe ? <Button onClick={() => handleConnect(WalletType.COSMIFRAME)}>DAO DAO</Button> : null}
+            {wallets.compass ? <Button onClick={() => handleConnect(WalletType.COMPASS)}>Compass</Button> : null}
           </Stack>
         </ModalContent>
       </Modal>

example/starter/src/utils/graz.ts

@@ -69,4 +69,8 @@ export const listedWallets = {
     name: "DAO DAO",
     imgSrc: "/assets/wallet-icon-daodao.png",
   },
+  [WalletType.COMPASS]: {
+    name: "Compass",
+    imgSrc: "/assets/wallet-icon-compass.png",
+  },
 };

packages/graz/package.json

@@ -1,7 +1,7 @@
 {
   "name": "graz",
   "description": "React hooks for Cosmos",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "author": "Griko Nibras <[email protected]>",
   "repository": "https://github.com/graz-sh/graz.git",
   "homepage": "https://github.com/graz-sh/graz",
@@ -48,7 +48,7 @@
     "@cosmjs/proto-signing": "*",
     "@cosmjs/stargate": "*",
     "@cosmjs/tendermint-rpc": "*",
-    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.37",
+    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.39",
     "react": ">=17"
   },
   "dependencies": {

packages/graz/src/actions/wallet/compass.ts

@@ -0,0 +1,46 @@
+import type { KeplrIntereactionOptions } from "@keplr-wallet/types";
+
+import { useGrazInternalStore } from "../../store";
+import type { Wallet } from "../../types/wallet";
+import { clearSession } from ".";
+
+/**
+ * Function to return Compass object (which is {@link Wallet}) and throws and error if it does not exist on `window`.
+ *
+ * @example
+ * ```ts
+ * try {
+ *   const compass = getCompass();
+ * } catch (error: Error) {
+ *   console.error(error.message);
+ * }
+ * ```
+ *
+ * @see https://docs.leapwallet.io/cosmos/for-dapps-connect-to-leap/add-leap-to-existing-keplr-integration
+ */
+export const getCompass = (): Wallet => {
+  if (typeof window.compass !== "undefined") {
+    const compass = window.compass;
+    const subscription: (reconnect: () => void) => () => void = (reconnect) => {
+      const listener = () => {
+        clearSession();
+        reconnect();
+      };
+      window.addEventListener("leap_keystorechange", listener);
+      return () => {
+        window.removeEventListener("leap_keystorechange", listener);
+      };
+    };
+    const setDefaultOptions = (options: KeplrIntereactionOptions) => {
+      compass.defaultOptions = options;
+    };
+    const res = Object.assign(compass, {
+      subscription,
+      setDefaultOptions,
+    });
+    return res;
+  }
+
+  useGrazInternalStore.getState()._notFoundFn();
+  throw new Error("window.leap is not defined");
+};

packages/graz/src/actions/wallet/index.ts

@@ -3,6 +3,7 @@ import { grazSessionDefaultValues, useGrazInternalStore, useGrazSessionStore } f
 import type { Wallet } from "../../types/wallet";
 import { WALLET_TYPES, WalletType } from "../../types/wallet";
 import { getCapsule } from "./capsule";
+import { getCompass } from "./compass";
 import { getCosmiframe } from "./cosmiframe";
 import { getMetamaskSnapCosmos } from "./cosmos-metamask-snap";
 import { getCosmostation } from "./cosmostation";
@@ -101,6 +102,9 @@ export const getWallet = (type: WalletType = useGrazInternalStore.getState().wal
       case WalletType.COSMIFRAME: {
         return getCosmiframe();
       }
+      case WalletType.COMPASS: {
+        return getCompass();
+      }
       default: {
         throw new Error("Unknown wallet type");
       }

packages/graz/src/provider/events.tsx

@@ -15,6 +15,7 @@ import { getXDefi } from "../actions/wallet/xdefi";
 import { RECONNECT_SESSION_KEY } from "../constant";
 import { useGrazInternalStore, useGrazSessionStore } from "../store";
 import { WalletType } from "../types/wallet";
+import { getCompass } from "../actions/wallet/compass";
 
 /**
  * Graz custom hook to track `keplr_keystorechange`, `leap_keystorechange`, `accountChanged` event and reconnect state
@@ -90,6 +91,11 @@ export const useGrazEvents = () => {
         getLeap().subscription?.(() => {
           void reconnect({ onError: _onReconnectFailed });
         });
+      }
+       if (_reconnectConnector === WalletType.COMPASS) {
+        getCompass().subscription?.(() => {
+          void reconnect({ onError: _onReconnectFailed });
+        });
       }
       if (_reconnectConnector === WalletType.VECTIS) {
         getVectis().subscription?.(() => {

packages/graz/src/types/wallet.ts

@@ -22,6 +22,7 @@ export enum WalletType {
   XDEFI = "xdefi",
   CAPSULE = "capsule",
   COSMIFRAME = "cosmiframe",
+  COMPASS = "compass",
 }
 
 export const WALLET_TYPES = [
@@ -40,6 +41,7 @@ export const WALLET_TYPES = [
   WalletType.CAPSULE,
   WalletType.METAMASK_SNAP_COSMOS,
   WalletType.COSMIFRAME,
+  WalletType.COMPASS,
 ];
 
 export type Wallet = Pick<

packages/graz/types/global.d.ts

@@ -6,6 +6,7 @@ type VectisWindow = import("@vectis/extension-client").VectisWindow;
 declare global {
   interface Window extends KeplrWindow, VectisWindow {
     leap?: KeplrWindow["keplr"];
+    compass?: KeplrWindow["keplr"];
     cosmostation?: {
       cosmos: {
         on: (type: string, listener: EventListenerOrEventListenerObject) => void;