1.33.0-0.1.1: [feature] Adds display options for wallets (#654)

* 1.33.0-0.1.1: [feature] Adds display options for wallets
* Make mobile/desktop optional properties

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.33.0-0.0.1",
+  "version": "1.33.0-0.1.1",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",

src/interfaces.ts

@@ -183,6 +183,7 @@ export interface CommonWalletOptions {
   iconSrc?: string
   svg?: string
   networkId?: number
+  display?: { mobile?: boolean; desktop?: boolean }
 }
 
 export interface SdkWalletOptions extends CommonWalletOptions {

src/modules/select/index.ts

@@ -46,23 +46,26 @@ function select(
   networkId: number,
   isMobile: boolean
 ) {
-  const defaultWalletNames = isMobile
-    ? mobileDefaultWalletNames
-    : desktopDefaultWalletNames
-
   if (wallets) {
+    const hideWallet = (wallet: WalletInitOptions) =>
+      wallet?.display &&
+      wallet?.display[isMobile ? 'mobile' : 'desktop'] === false
+
     // For backwards compatibility if a user is still using 'detectedwallet' in the onboard wallet select array
     // it will be filtered out so there are no duplicates
     wallets = wallets.filter(
       wallet =>
-        'walletName' in wallet ? wallet.walletName !== 'detectedwallet' : true // It is not a WalletInitOption but rather a WalletModule so let it through
+        'walletName' in wallet
+          ? wallet.walletName !== 'detectedwallet' && !hideWallet(wallet)
+          : true // It is not a WalletInitOption but rather a WalletModule so let it through
     )
 
     // If we detect an injected wallet then place the detected wallet
-    // at the beginning of the list e.g. the of the wallet select modal
+    // at the beginning of the list e.g. the top of the wallet select modal
     if (injectedWalletDetected()) {
       wallets.unshift({ walletName: 'detectedwallet' })
     }
+
     return Promise.all(
       wallets.map(wallet => {
         // If this is a wallet init object then load the built-in wallet module
@@ -87,6 +90,10 @@ function select(
     )
   }
 
+  const defaultWalletNames = isMobile
+    ? mobileDefaultWalletNames
+    : desktopDefaultWalletNames
+
   return Promise.all(
     defaultWalletNames
       // Include the detected wallet only if an injected wallet is detected

src/validation.ts

@@ -661,8 +661,15 @@ export function validateWalletInit(
 ): void | never {
   validateType({ name: 'walletInit', value: walletInit, type: 'object' })
 
-  const { walletName, preferred, label, iconSrc, svg, ...otherParams } =
-    walletInit
+  const {
+    walletName,
+    preferred,
+    label,
+    iconSrc,
+    svg,
+    display,
+    ...otherParams
+  } = walletInit
 
   invalidParams(
     otherParams,
@@ -698,10 +705,17 @@ export function validateWalletInit(
       'webUri',
       'xsUri',
       'blockedPopupRedirect',
-      'customNetwork'
+      'customNetwork',
+      'display'
     ],
     'walletInitObject'
   )
+  validateType({
+    name: 'walletInit.display',
+    value: display,
+    type: 'object',
+    optional: true
+  })
 
   validateType({
     name: 'walletInit.walletName',