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 <griko@strange.love>",
  "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;