Add Station support (#123)

example/starter/src/utils/graz.ts

@@ -26,6 +26,10 @@ export const listedWallets = {
     name: "Vectis",
     imgSrc: "/assets/wallet-icon-vectis.svg",
   },
+  [WalletType.STATION]: {
+    name: "Station",
+    imgSrc: "/assets/wallet-icon-station.svg",
+  },
   [WalletType.METAMASK_SNAP_LEAP]: {
     name: "Metamask Snap Leap",
     imgSrc: "/assets/wallet-icon-metamask.png",

packages/graz-adapter-station/.eslintrc.js

@@ -0,0 +1,8 @@
+// @ts-check
+
+const { extendEslint } = require("@graz-sh/style-guide");
+
+module.exports = extendEslint(["browser-node", "react", "typescript", "tsup"], {
+  ignorePatterns: ["dist/**"],
+  root: true,
+});

packages/graz-adapter-station/.gitignore

@@ -0,0 +1,4 @@
+/chains/*
+/dist/**/*
+!/chains/*.stub
+!/dist/**/.gitkeep

packages/graz-adapter-station/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Graz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/graz-adapter-station/README.md

@@ -0,0 +1,9 @@
+# graz-adapter-station
+
+[![npm/v](https://badgen.net/npm/v/graz-adapter-station)](https://www.npmjs.com/package/graz-adapter-station)
+[![npm/dt](https://badgen.net/npm/dt/graz-adapter-station)](https://www.npmjs.com/package/graz-adapter-station)
+[![stars](https://badgen.net/github/stars/graz-sh/graz)](https://github.com/graz-sh/graz)
+
+React hooks for Cosmos. Learn more about graz on the [official GitHub repository](https://github.com/graz-sh/graz).
+
+[MIT License, Copyright (c) 2023 Graz](./LICENSE)

packages/graz-adapter-station/env.d.ts

@@ -0,0 +1,6 @@
+import Station from "@terra-money/station-connector";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+declare interface Window {
+  station?: Station;
+}

packages/graz-adapter-station/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "graz-adapter-station",
+  "description": "Graz adapter for Station Wallet",
+  "version": "0.0.2",
+  "repository": "https://github.com/graz-sh/graz.git",
+  "homepage": "https://github.com/graz-sh/graz",
+  "bugs": "https://github.com/graz-sh/graz/issues",
+  "files": [
+    "dist/*.d.ts",
+    "dist/*.js",
+    "dist/*.mjs"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --fix \"src/**/*.{ts,tsx}\"",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "graz": ">=0.0.37"
+  },
+  "devDependencies": {
+    "graz": "*",
+    "typescript": "^5.2.2"
+  },
+  "keywords": [
+    "graz",
+    "graz-adapter",
+    "graz-adapter-station",
+    "station-wallet",
+    "station",
+    "use-station"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@terra-money/station-connector": "^1.0.15"
+  }
+}

packages/graz-adapter-station/src/index.ts

@@ -0,0 +1,149 @@
+import type { ChainInfo } from "@keplr-wallet/types";
+import type { AccountData, GrazAdapter } from "graz";
+import { SignDoc } from "cosmjs-types/cosmos/tx/v1beta1/tx";
+import { DirectSignResponse } from "@cosmjs/proto-signing";
+import { ChainInfoResponse } from "@terra-money/station-connector/keplrConnector";
+
+export class StationAdapter implements GrazAdapter {
+  name = "Station";
+  id = "station";
+  keystoreEvent = "station_wallet_change";
+
+  private getConnector() {
+    if (typeof window.station !== "undefined") return window.station.keplr;
+    throw new Error("window.keplr is not defined");
+  }
+
+  checkConnector() {
+    try {
+      this.getConnector();
+      return true;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  }
+
+  async enable(chainId: string) {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+      await this.getConnector().enable(chainId);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  async experimentalSuggestChain(chainInfo: ChainInfo) {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+
+      const chainInfoResponse: ChainInfoResponse = Object.assign(chainInfo, {
+        chainSymbolImageUrl: chainInfo.chainSymbolImageUrl || "",
+        stakeCurrency: {
+          coinDecimals: chainInfo.stakeCurrency.coinDecimals,
+          coinDenom: chainInfo.stakeCurrency.coinDenom,
+          coinImageUrl: chainInfo.stakeCurrency.coinImageUrl || "",
+          coinMinimalDenom: chainInfo.stakeCurrency.coinMinimalDenom,
+        },
+        currencies: chainInfo.currencies.map((currency) => ({
+          coinDecimals: currency.coinDecimals,
+          coinDenom: currency.coinDenom,
+          coinImageUrl: currency.coinImageUrl || "",
+          coinMinimalDenom: currency.coinMinimalDenom,
+        })),
+        feeCurrencies: chainInfo.feeCurrencies.map((currency) => ({
+          coinDecimals: currency.coinDecimals,
+          coinDenom: currency.coinDenom,
+          coinImageUrl: currency.coinImageUrl || "",
+          coinMinimalDenom: currency.coinMinimalDenom,
+          gasPriceStep: {
+            average: currency.gasPriceStep?.average || 0,
+            high: currency.gasPriceStep?.high || 0,
+            low: currency.gasPriceStep?.low || 0,
+          },
+        })),
+      });
+
+      await this.getConnector().experimentalSuggestChain(chainInfoResponse);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  async getAccount(chainId: string, prefix?: string): Promise<AccountData> {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+      const key = await this.getConnector().getKey(chainId);
+      return {
+        address: key.address,
+        bech32Address: key.bech32Address,
+        pubKey: key.pubKey,
+        algo: key.algo,
+      };
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  getOfflineSigner(chainId: string) {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+      const signerOnlyAmino = this.getConnector().getOfflineSignerOnlyAmino(chainId);
+      const signDirect: (signerAddress: string, signDoc: SignDoc) => Promise<DirectSignResponse> = async (
+        signerAddress: string,
+        signDoc: SignDoc,
+      ) => {
+        throw new Error("signDirect not supported by Station");
+      };
+      const signer = Object.assign(signerOnlyAmino, { signDirect });
+
+      return signer;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  getOfflineSignerOnlyAmino(chainId: string) {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+      const signer = this.getConnector().getOfflineSignerOnlyAmino(chainId);
+      return signer;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  async getOfflineSignerAuto(chainId: string) {
+    try {
+      const isAvailable = this.checkConnector();
+      if (!isAvailable) {
+        throw new Error("Station is not available");
+      }
+      const signer = await this.getConnector().getOfflineSignerAuto(chainId);
+      return signer;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+}

packages/graz-adapter-station/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@graz-sh/style-guide/tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"]
+}

packages/graz-adapter-station/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig(({ watch }) => ({
+  cjsInterop: true,
+  clean: !watch,
+  dts: true,
+  entry: ["src/*.ts"],
+  format: ["cjs", "esm"],
+  minify: !watch,
+  shims: true,
+  splitting: true,
+  treeshake: true,
+}));

packages/graz/package.json

@@ -61,6 +61,7 @@
     "@keplr-wallet/types": "^0.12.23",
     "@metamask/providers": "^12.0.0",
     "@tanstack/react-query": "^4.35.0",
+    "@terra-money/station-connector": "^1.0.15",
     "@vectis/extension-client": "^0.7.2",
     "@walletconnect/sign-client": "^2.10.0",
     "@walletconnect/types": "^2.10.0",

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

@@ -19,16 +19,14 @@ import { clearSession } from ".";
 export const getCosmostation = (): Wallet => {
   if (typeof window.cosmostation.providers.keplr !== "undefined") {
     const cosmostation = window.cosmostation.providers.keplr;
-    const subscription: (reconnect: () => void) => void = (reconnect) => {
-      window.cosmostation.cosmos.on("accountChanged", () => {
+    const subscription: (reconnect: () => void) => () => void = (reconnect) => {
+      const listener = () => {
         clearSession();
         reconnect();
-      });
+      };
+      window.cosmostation.cosmos.on("accountChanged", listener);
       return () => {
-        window.cosmostation.cosmos.off("accountChanged", () => {
-          clearSession();
-          reconnect();
-        });
+        window.cosmostation.cosmos.off("accountChanged", listener);
       };
     };
     const res = Object.assign(cosmostation, {

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

@@ -11,6 +11,7 @@ import { getWalletConnect } from "./wallet-connect";
 import { getWCCosmostation } from "./wallet-connect/cosmostation";
 import { getWCKeplr } from "./wallet-connect/keplr";
 import { getWCLeap } from "./wallet-connect/leap";
+import { getStation } from "./station";
 
 /**
  * Function to check whether given {@link WalletType} or default configured wallet exists.
@@ -76,6 +77,9 @@ export const getWallet = (type: WalletType = useGrazInternalStore.getState().wal
     case WalletType.METAMASK_SNAP_LEAP: {
       return getMetamaskSnapLeap();
     }
+    case WalletType.STATION: {
+      return getStation();
+    }
     default: {
       throw new Error("Unknown wallet type");
     }

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

@@ -19,16 +19,14 @@ import { clearSession } from ".";
 export const getKeplr = (): Wallet => {
   if (typeof window.keplr !== "undefined") {
     const keplr = window.keplr;
-    const subscription: (reconnect: () => void) => void = (reconnect) => {
-      window.addEventListener("keplr_keystorechange", () => {
+    const subscription: (reconnect: () => void) => () => void = (reconnect) => {
+      const listener = () => {
         clearSession();
         reconnect();
-      });
+      };
+      window.addEventListener("keplr_keystorechange", listener);
       return () => {
-        window.removeEventListener("keplr_keystorechange", () => {
-          clearSession();
-          reconnect();
-        });
+        window.removeEventListener("keplr_keystorechange", listener);
       };
     };
     const res = Object.assign(keplr, {

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

@@ -19,16 +19,14 @@ import { clearSession } from ".";
 export const getLeap = (): Wallet => {
   if (typeof window.leap !== "undefined") {
     const leap = window.leap;
-    const subscription: (reconnect: () => void) => void = (reconnect) => {
-      window.addEventListener("leap_keystorechange", () => {
+    const subscription: (reconnect: () => void) => () => void = (reconnect) => {
+      const listener = () => {
         clearSession();
         reconnect();
-      });
+      };
+      window.addEventListener("leap_keystorechange", listener);
       return () => {
-        window.removeEventListener("leap_keystorechange", () => {
-          clearSession();
-          reconnect();
-        });
+        window.removeEventListener("leap_keystorechange", listener);
       };
     };
     const res = Object.assign(leap, {