Merge pull request #151 from blocknative/enhancement/detect-os

Added feature to set os exclusions for wallets.

Closes #149

Author: lnbc1QWFyb24

src/interfaces.ts

@@ -82,6 +82,7 @@ export interface WalletModule {
   preferred?: boolean
   desktop?: boolean
   mobile?: boolean
+  osExclusions?: Array<string>
 }
 
 export interface Helpers {
@@ -209,6 +210,7 @@ export interface AppState {
   networkId: number
   version: string
   mobileDevice: boolean
+  os: string
   darkMode: boolean
   autoSelectWallet: string
   walletSelectInProgress: boolean

src/modules/select/wallets/opera-touch.ts

@@ -37,7 +37,8 @@ function operaTouch(
     link: 'https://www.opera.com/mobile/touch',
     installMessage: extensionInstallMessage,
     mobile: true,
-    preferred
+    preferred,
+    osExclusions: ['Android']
   }
 }
 

src/modules/select/wallets/opera.ts

@@ -37,7 +37,9 @@ function opera(
     link: 'https://www.opera.com/',
     installMessage: extensionInstallMessage,
     desktop: true,
-    preferred
+    mobile: true,
+    preferred,
+    osExclusions: ['iOS']
   }
 }
 

src/onboard.ts

@@ -14,7 +14,7 @@ import {
   walletInterface
 } from './stores'
 
-import { isMobileDevice } from './utilities'
+import { getDeviceInfo } from './utilities'
 import { initializeBlocknative } from './services'
 import { validateInit, validateConfig } from './validation'
 
@@ -45,12 +45,15 @@ function init(initialization: Initialization): API {
 
   initializeBlocknative(dappId, networkId)
 
+  const { os, isMobile } = getDeviceInfo()
+
   app.update((store: AppState) => ({
     ...store,
     dappId,
     networkId,
     version,
-    mobileDevice: isMobileDevice(),
+    mobileDevice: isMobile,
+    os,
     darkMode
   }))
 

src/stores.ts

@@ -18,6 +18,7 @@ export const app: WritableStore = writable({
   networkId: 1,
   version: '',
   mobileDevice: false,
+  os: '',
   darkMode: false,
   walletSelectInProgress: false,
   walletSelectCompleted: false,

src/utilities.ts

@@ -161,11 +161,15 @@ export function getProviderName(provider: any): string | undefined {
   }
 }
 
-export function isMobileDevice() {
+export function getDeviceInfo() {
   const browser = bowser.getParser(window.navigator.userAgent)
+  const { name } = browser.getOS()
   const { type } = browser.getPlatform()
 
-  return type !== 'desktop'
+  return {
+    isMobile: type !== 'desktop',
+    os: name
+  }
 }
 
 export function networkName(id: number): string {

src/views/WalletSelect.svelte

@@ -44,7 +44,7 @@
 
   let selectedWalletModule: WalletModule
 
-  const { mobileDevice } = get(app)
+  const { mobileDevice, os } = get(app)
   let { heading, description, wallets } = module
 
   let primaryWallets: WalletModule[]
@@ -59,9 +59,12 @@
 
     wallets = await wallets
 
-    const deviceWallets = (wallets as WalletModule[]).filter(
-      wallet => wallet[mobileDevice ? 'mobile' : 'desktop']
-    )
+    const deviceWallets = (wallets as WalletModule[])
+      .filter(wallet => wallet[mobileDevice ? 'mobile' : 'desktop'])
+      .filter(wallet => {
+        const { osExclusions = [] } = wallet
+        return !osExclusions.includes(os)
+      })
 
     if (appState.autoSelectWallet) {
       const module = deviceWallets.find(