feat: Add Keplr mobile connector (#1)

package.json

@@ -62,6 +62,11 @@
       "import": "./dist/keplr.js",
       "require": "./dist/keplr.cjs"
     },
+    "./keplrMobile": {
+      "types": "./dist/keplrMobile.d.ts",
+      "import": "./dist/keplrMobile.js",
+      "require": "./dist/keplrMobile.cjs"
+    },
     "./fordefi": {
       "types": "./dist/fordefi.d.ts",
       "import": "./dist/fordefi.js",

src/connectors/keplrMobile/constants.ts

@@ -0,0 +1,5 @@
+export const KEPLR_MOBILE_APP_ICON = `<svg width="32" height="32" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 64C0 41.5979 0 30.3969 4.35974 21.8404C8.19467 14.3139 14.3139 8.19467 21.8404 4.35974C30.3969 0 41.5979 0 64 0C86.4021 0 97.6031 0 106.16 4.35974C113.686 8.19467 119.805 14.3139 123.64 21.8404C128 30.3969 128 41.5979 128 64C128 86.4021 128 97.6031 123.64 106.16C119.805 113.686 113.686 119.805 106.16 123.64C97.6031 128 86.4021 128 64 128C41.5979 128 30.3969 128 21.8404 123.64C14.3139 119.805 8.19467 113.686 4.35974 106.16C0 97.6031 0 86.4021 0 64Z" fill="#14AFEB"/>
+  <path d="M66.6672 41.3438C67.3936 48.7672 67.7565 52.4791 69.7022 55.201C70.5359 56.3673 71.5642 57.3817 72.7418 58.1994C75.4899 60.1076 79.2063 60.4202 86.6387 61.0451L89.7812 61.3091V66.6909L86.6387 66.9549C79.2063 67.5798 75.4899 67.8924 72.7418 69.8006C71.5642 70.6183 70.5359 71.6327 69.7022 72.799C67.7565 75.5209 67.3936 79.2328 66.6672 86.6562H61.3328C60.6064 79.2328 60.2435 75.5209 58.2978 72.799C57.4641 71.6327 56.4358 70.6183 55.2582 69.8006C52.5101 67.8924 48.7937 67.5798 41.3613 66.9549L38.2187 66.6909V61.3091L41.3613 61.0451C48.7937 60.4202 52.5101 60.1076 55.2582 58.1994C56.4358 57.3817 57.4641 56.3673 58.2978 55.201C60.2435 52.4791 60.6064 48.7672 61.3328 41.3438H66.6672Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M64 14C105.175 14 114 22.825 114 64C114 105.175 105.175 114 64 114C22.825 114 14 105.175 14 64C14 22.825 22.825 14 64 14ZM96.6782 31.2798C84.5687 19.1705 60.1124 23.9936 42.0533 42.0525C23.9941 60.1117 19.171 84.5687 31.2806 96.6782C43.3902 108.788 67.8464 103.965 85.9055 85.9055C103.965 67.8463 108.788 43.3894 96.6782 31.2798Z" fill="white"/>
+</svg>`

src/connectors/keplrMobile/helpers/inAppBrowser.ts

@@ -0,0 +1,14 @@
+export const isInKeplrMobileAppBrowser = (): boolean => {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  const userAgent = navigator.userAgent
+  const isKeplrMobileApp = userAgent.includes("KeplrWalletMobile")
+
+  if (!isKeplrMobileApp) {
+    return false
+  }
+
+  return isKeplrMobileApp
+}

src/connectors/keplrMobile/helpers/index.ts

@@ -0,0 +1 @@
+export * from "./inAppBrowser"

src/connectors/keplrMobile/index.ts

@@ -0,0 +1,124 @@
+import { type AccountChangeEventHandler } from "@starknet-io/get-starknet-core"
+import type {
+  RequestFnCall,
+  RpcMessage,
+  RpcTypeToMessageMap,
+  StarknetWindowObject,
+} from "@starknet-io/types-js"
+import type {
+  AccountInterface,
+  ProviderInterface,
+  ProviderOptions,
+} from "starknet"
+import {
+  Connector,
+  type ConnectArgs,
+  type ConnectorData,
+  type ConnectorIcons,
+} from "../connector"
+import { Keplr } from "../injected/keplr"
+import { type InjectedConnectorOptions } from "../injected"
+import { KEPLR_MOBILE_APP_ICON } from "./constants"
+import { isInKeplrMobileAppBrowser } from "./helpers/inAppBrowser"
+
+export class KeplrMobileBaseConnector extends Connector {
+  private _wallet: StarknetWindowObject | null = null
+
+  constructor() {
+    super()
+  }
+
+  available(): boolean {
+    return true
+  }
+
+  async ready(): Promise<boolean> {
+    // return true to be compatible with starknet-react
+    // will need to be implemented
+    return true
+  }
+
+  get id(): string {
+    return "keplrMobile"
+  }
+
+  get name(): string {
+    return "Keplr (mobile)"
+  }
+
+  get icon(): ConnectorIcons {
+    return {
+      dark: KEPLR_MOBILE_APP_ICON,
+      light: KEPLR_MOBILE_APP_ICON,
+    }
+  }
+
+  get wallet(): StarknetWindowObject {
+    throw new Error("not implemented")
+  }
+
+  async connect(_args: ConnectArgs = {}): Promise<ConnectorData> {
+    await this.ensureWallet()
+
+    // will return empty data, connect will only open keplr mobile app
+    // will require to implement the wallet connection
+    return {
+      account: "",
+      chainId: BigInt(0),
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    throw new Error("not implemented")
+  }
+
+  async account(
+    _: ProviderOptions | ProviderInterface,
+  ): Promise<AccountInterface> {
+    throw new Error("not implemented")
+  }
+
+  async chainId(): Promise<bigint> {
+    throw new Error("not implemented")
+  }
+
+  async request<T extends RpcMessage["type"]>(
+    call: RequestFnCall<T>,
+  ): Promise<RpcTypeToMessageMap[T]["result"]> {
+    throw new Error("not implemented")
+  }
+
+  // needed, methods required by starknet-react. Otherwise an exception is throwd
+  async initEventListener(_: AccountChangeEventHandler) {
+    throw new Error("not implemented")
+  }
+
+  // needed, methods required by starknet-react. Otherwise an exception is throwd
+  async removeEventListener(_: AccountChangeEventHandler) {
+    throw new Error("not implemented")
+  }
+
+  private async ensureWallet(): Promise<void> {
+    window.open(
+      `https://deeplink.keplr.app/web-browser?url=${encodeURIComponent(window.origin)}`,
+      "_blank",
+    )
+  }
+}
+
+export interface KeplrMobileConnectorInitParams {
+  inAppBrowserOptions?: Omit<InjectedConnectorOptions, "id">
+}
+
+export class KeplrMobileConnector {
+  static init(params?: KeplrMobileConnectorInitParams): Connector {
+    const { inAppBrowserOptions } = params || {}
+    if (isInKeplrMobileAppBrowser()) {
+      return new Keplr(inAppBrowserOptions)
+    } else {
+      return new KeplrMobileBaseConnector()
+    }
+  }
+}
+
+export { isInKeplrMobileAppBrowser }

src/helpers/defaultConnectors.ts

@@ -1,6 +1,7 @@
 import type { StarknetkitConnector } from "../connectors"
 import { type ArgentMobileConnectorOptions } from "../connectors/argent/argentMobile"
 import { BraavosMobileBaseConnector } from "../connectors/braavosMobile"
+import { KeplrMobileBaseConnector } from "../connectors/keplrMobile"
 import { ControllerConnector } from "../connectors/controller"
 import { WebWalletConnector } from "../connectors/webwallet"
 import { Braavos } from "../connectors/injected/braavos"
@@ -43,6 +44,7 @@ export const defaultConnectors = ({
 
   if (isMobileDevice()) {
     defaultConnectors.push(new BraavosMobileBaseConnector())
+    defaultConnectors.push(new KeplrMobileBaseConnector())
   }
 
   return defaultConnectors

vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
           __dirname,
           "src/connectors/webwallet/index.ts",
         ),
+        keplrMobile: resolve(__dirname, "src/connectors/keplrMobile/index.ts"),
         argentMobile: resolve(
           __dirname,
           "src/connectors/argent/argentMobile/index.ts",