1.25.0-0.5.2: [refactor] Adds autoselect for gnosis wallet (#555)

* Adds autoselect for gnosis safe
* Fix icon
* Move logic out of wallet module

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.25.0-0.4.2",
+  "version": "1.25.0-0.5.2",
   "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/modules/select/wallet-icons/icon-gnosis.ts

@@ -1,11 +1,7 @@
 const gnosisWalletIcon = `
-<svg class="gnosis-logo" viewBox="0 0 2000 2000" enable-background="new 0 0 2000 2000" width="40" height="40">
-    <g fill="#00a6c4">
-        <path d="m1809.4 500l-73.6 73.6c58.5 92 76.9 207.4 36.8 317.7-66.9 187.3-274.2 286-463.2 219.1-26.8-10-51.8-21.7-73.6-36.8l-235.8 235.8-205.7-207.4c-95.3 63.5-217.4 81.9-332.8 41.8-194-70.2-294.3-282.6-224.1-474.9 10-30.1 25.1-56.9 41.8-81.9l-88.6-88.6-16.7 28.4c-92 150.5-142.1 324.4-142.1 503.3-1.7 533.4 433.1 969.9 966.5 969.9h1.7c533.4 0 966.6-433.1 968.2-966.6 0-177.3-48.5-351.2-140.5-503.3l-18.3-30.1"/>
-        <path d="m388 695.7c-25.1 33.4-40.1 75.3-40.1 120.4 0 108.7 88.6 197.3 197.3 197.3 45.2 0 87-15.1 120.4-41.8l-277.6-275.9"/>
-        <path d="m1356.2 954.8c31.8 21.7 68.6 33.4 110.4 33.4 108.7 0 197.3-88.6 197.3-197.3 0-40.1-11.7-78.6-33.4-110.4l-274.3 274.3"/>
-        <path d="m1003.3 1162.2l-799.3-802.7 31.8-33.4c197.3-209 466.5-326.1 755.8-326.1h1.7c292.6 0 573.6 125.4 769.2 342.8l30.1 33.4-789.3 786m-668.8-802.7l668.9 670.6 660.5-657.2c-177.3-177.2-418.1-279.3-668.9-279.3h-1.7c-249.2 0-481.6 93.7-658.8 265.9"/>
-    </g>
-</svg>`
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 440 440">
+    <path d="M220,9.82C103.92,9.82,9.82,103.92,9.82,220S103.92,430.18,220,430.18,430.18,336.08,430.18,220,336.08,9.82,220,9.82ZM373.83,231.47H276.3a59.41,59.41,0,1,1,.45-20.67h97.08a10.34,10.34,0,1,1,0,20.67Z"/>
+</svg>
+`
 
 export default gnosisWalletIcon

src/modules/select/wallets/gnosis.ts

@@ -3,13 +3,22 @@ import type { SafeInfo } from '@gnosis.pm/safe-apps-sdk'
 import { CommonWalletOptions, Helpers, WalletModule } from '../../../interfaces'
 import gnosisWalletIcon from '../wallet-icons/icon-gnosis'
 
-const getSafe = (sdk: SafeAppsSDK): Promise<SafeInfo | undefined> => {
-  return Promise.race([
+const getSafe = (sdk: SafeAppsSDK): Promise<SafeInfo | undefined> =>
+  Promise.race([
     sdk.getSafeInfo(),
     // Timeout need as this method hangs until it can find the safe info
     new Promise<undefined>(resolve => setTimeout(resolve, 200))
   ])
-}
+
+/**
+ * Checks to see if we are are within a Safe App context. If we are it executes
+ * the callback function which self-selects this wallet.
+ * @param selectWallet - A callback function which can call the `walletSelect` method
+ * with the Gnosis wallet name.
+ */
+export const checkGnosisSafeContext = async (selectWallet: () => void) =>
+  !!(await getSafe(new (await import('@gnosis.pm/safe-apps-sdk')).default())) &&
+  selectWallet()
 
 function gnosis(options: CommonWalletOptions): WalletModule {
   const { preferred, label, iconSrc, svg, networkId } = options
@@ -18,7 +27,7 @@ function gnosis(options: CommonWalletOptions): WalletModule {
   const link = `https://${network}gnosis-safe.io/app`
 
   return {
-    name: label || 'Gnosis Safe Wallet',
+    name: label || 'Gnosis Safe',
     iconSrc,
     svg: svg || gnosisWalletIcon,
     wallet: async ({ createModernProviderInterface }: Helpers) => {

src/onboard.ts

@@ -17,7 +17,7 @@ import {
 } from './stores'
 
 import { getDeviceInfo } from './utilities'
-import { validateInit, validateConfig } from './validation'
+import { validateInit, validateConfig, isWalletInit } from './validation'
 
 import { version } from '../package.json'
 
@@ -27,7 +27,8 @@ import {
   API,
   ConfigOptions,
   UserState,
-  Wallet
+  Wallet,
+  WalletInitOptions
 } from './interfaces'
 
 import initializeModules from './modules'
@@ -241,6 +242,24 @@ function init(initialization: Initialization): API {
     return get(state)
   }
 
+  // Find the Gnosis wallet from the wallet init options. Ignore it
+  // if it is a wallet module. We need to get the wallet init first
+  // in order to determine the wallet name: `walletName` or `label`.
+  const {
+    // If label is undefined set it to 'Gnosis Safe'
+    label: gnosisWalletName = 'Gnosis Safe'
+  } = initialization.walletSelect?.wallets?.find(
+    wallet => isWalletInit(wallet) && wallet.walletName === 'gnosis'
+  ) as WalletInitOptions
+
+  if (gnosisWalletName) {
+    import(
+      './modules/select/wallets/gnosis'
+    ).then(({ checkGnosisSafeContext }) =>
+      checkGnosisSafeContext(() => walletSelect(gnosisWalletName))
+    )
+  }
+
   return {
     walletSelect,
     walletCheck,