chore(wallets discovery): added mobile os store links support

packages/core/src/discovery.ts

@@ -1,12 +1,36 @@
+import { ssrSafeWindow } from "./utils"
+
+export type OperatingSystemStoreVersion = "ios" | "android"
+export type BrowserStoreVersion = "chrome" | "firefox" | "edge" | "safari"
+
+type DownloadsRecord<
+  SV extends OperatingSystemStoreVersion | BrowserStoreVersion,
+  DL extends string,
+> = Record<SV, DL>
+
 export type WalletProvider = {
   id: string
   name: string
   icon: string
   downloads:
-    | { chrome?: `https://chrome.google.com/webstore/detail/${string}` }
-    | { firefox?: `https://addons.mozilla.org/en-US/firefox/addon/${string}` }
-    | { edge?: `https://microsoftedge.microsoft.com/addons/detail/${string}` }
-    | { safari?: `https://apps.apple.com/us/app/${string}` }
+    | DownloadsRecord<
+        "chrome",
+        `https://chrome.google.com/webstore/detail/${string}`
+      >
+    | DownloadsRecord<
+        "firefox",
+        `https://addons.mozilla.org/en-US/firefox/addon/${string}`
+      >
+    | DownloadsRecord<
+        "edge",
+        `https://microsoftedge.microsoft.com/addons/detail/${string}`
+      >
+    | DownloadsRecord<"safari", `https://apps.apple.com/us/app/${string}`>
+    | DownloadsRecord<"ios", `https://apps.apple.com/us/app/${string}`>
+    | DownloadsRecord<
+        "android",
+        `https://play.google.com/store/apps/details?id=${string}`
+      >
 }
 
 const wallets: WalletProvider[] = [
@@ -30,7 +54,9 @@ const wallets: WalletProvider[] = [
         "https://chrome.google.com/webstore/detail/braavos-wallet/jnlgamecbpmbajjfhmmmlhejkemejdma",
       firefox: "https://addons.mozilla.org/en-US/firefox/addon/braavos-wallet",
       edge: "https://microsoftedge.microsoft.com/addons/detail/braavos-wallet/hkkpjehhcnhgefhbdcgfkeegglpjchdc",
-    },
+      ios: `https://link.braavos.app/dapp/${ssrSafeWindow?.location?.host}`,
+      android: `https://link.braavos.app/dapp/${ssrSafeWindow?.location?.host}`,
+    } as Record<BrowserStoreVersion | OperatingSystemStoreVersion, any>,
   },
   {
     id: "okxwallet",

packages/core/src/main.ts

@@ -4,7 +4,7 @@ import {
 } from "./StarknetWindowObject"
 import discovery, { WalletProvider } from "./discovery"
 import { IStorageWrapper, LocalStorageWrapper } from "./localStorageStore"
-import { pipe } from "./utils"
+import { pipe, ssrSafeWindow } from "./utils"
 import { FilterList, filterBy, filterByPreAuthorized } from "./wallet/filter"
 import { isWalletObj } from "./wallet/isWalletObject"
 import { injectMetamaskBridge } from "./wallet/metamaskBridge"
@@ -24,18 +24,20 @@ export type {
   DisconnectedStarknetWindowObject,
   IStarknetWindowObject,
 } from "./StarknetWindowObject"
-export type { WalletProvider } from "./discovery"
+export type {
+  WalletProvider,
+  BrowserStoreVersion,
+  OperatingSystemStoreVersion,
+} from "./discovery"
 
 export interface GetStarknetOptions {
   windowObject: Record<string, any>
   isWalletObject: (wallet: any) => boolean
   storageFactoryImplementation: (name: string) => IStorageWrapper
 }
 
-const ssrSafeWindow = typeof window !== "undefined" ? window : {}
-
 const defaultOptions: GetStarknetOptions = {
-  windowObject: ssrSafeWindow,
+  windowObject: ssrSafeWindow ?? {},
   isWalletObject: isWalletObj,
   storageFactoryImplementation: (name: string) => new LocalStorageWrapper(name),
 }
@@ -139,4 +141,6 @@ export function getStarknet(
   }
 }
 
+export { ssrSafeWindow } from "./utils"
+
 export default getStarknet()

packages/core/src/utils.ts

@@ -18,3 +18,6 @@ export function pipe<T>(
 ): (arg: T) => Promise<T> {
   return (arg: T) => fns.reduce((acc, fn) => acc.then(fn), Promise.resolve(arg))
 }
+
+export const ssrSafeWindow: Window | null =
+  typeof window !== "undefined" ? window : null

packages/ui/src/main.ts

@@ -1,18 +1,18 @@
 import show, { type WalletProviderWithStoreVersion } from "./modal"
 import Bowser from "bowser"
 import sn, {
+  type BrowserStoreVersion,
   type DisconnectOptions,
   type GetWalletOptions,
+  type OperatingSystemStoreVersion,
   type StarknetWindowObject,
+  type WalletProvider,
+  ssrSafeWindow,
 } from "get-starknet-core"
 
 export type { StarknetWindowObject, DisconnectOptions } from "get-starknet-core"
 
-type StoreVersion = "chrome" | "firefox" | "edge" | "safari"
-
-const ssrSafeWindow = typeof window !== "undefined" ? window : null
-
-function getStoreVersionFromBrowser(): StoreVersion | null {
+function getBrowserStoreVersionFromBrowser(): BrowserStoreVersion | null {
   const browserName = Bowser.getParser(ssrSafeWindow?.navigator.userAgent)
     .getBrowserName()
     ?.toLowerCase()
@@ -35,10 +35,25 @@ function getStoreVersionFromBrowser(): StoreVersion | null {
   }
 }
 
+function getOperatingSystemStoreVersionFromBrowser(): OperatingSystemStoreVersion | null {
+  const os =
+    Bowser.getParser(ssrSafeWindow?.navigator.userAgent)
+      .getOS()
+      ?.name?.toLowerCase() ?? null
+  switch (os) {
+    case "ios":
+    case "android":
+      return os
+    default:
+      return null
+  }
+}
+
 export interface ConnectOptions extends GetWalletOptions {
   modalMode?: "alwaysAsk" | "canAsk" | "neverAsk"
   modalTheme?: "light" | "dark" | "system"
-  storeVersion?: StoreVersion
+  storeVersion?: BrowserStoreVersion
+  osVersion?: OperatingSystemStoreVersion
 }
 
 const enableWithVersion = async (wallet: StarknetWindowObject | null) => {
@@ -50,7 +65,8 @@ const enableWithVersion = async (wallet: StarknetWindowObject | null) => {
 
 export const connect = async ({
   modalMode = "canAsk",
-  storeVersion = getStoreVersionFromBrowser(),
+  storeVersion = getBrowserStoreVersionFromBrowser(),
+  osVersion = getOperatingSystemStoreVersionFromBrowser(),
   modalTheme,
   ...restOptions
 }: ConnectOptions = {}): Promise<StarknetWindowObject | null> => {
@@ -85,13 +101,26 @@ export const connect = async ({
 
   const discoveryWallets = await sn.getDiscoveryWallets(restOptions)
 
-  const discoveryWalletsByStoreVersion: WalletProviderWithStoreVersion[] =
-    discoveryWallets
-      .filter((w) => Boolean(w.downloads[storeVersion]))
-      .map(({ downloads, ...w }) => ({
-        ...w,
-        download: downloads[storeVersion],
-      }))
+  const discoveryWalletsByStoreVersion = discoveryWallets.reduce<
+    WalletProviderWithStoreVersion[]
+  >((results, w) => {
+    const download =
+      // prioritize OS url
+      w.downloads[osVersion] ||
+      // fallback to browser url
+      w.downloads[storeVersion]
+    if (download) {
+      const store = Object.keys(w.downloads).find(
+        (key) => w.downloads[key] === download,
+      ) as keyof WalletProvider["downloads"]
+
+      const isMobileStore = store === "android" || store === "ios"
+      const name = isMobileStore ? `${w.name} Mobile` : `Install ${w.name}`
+
+      results.push({ ...w, name, download })
+    }
+    return results
+  }, [])
 
   return show({
     lastWallet,

packages/ui/src/modal/Modal.svelte

@@ -143,7 +143,7 @@
                 cb(null)
               }
             }}>
-            Install {discoveryWallet.name}
+            {discoveryWallet.name}
             <img
               alt={discoveryWallet.name}
               src={discoveryWallet.icon}