1.29.0-0.4.3: [feature] Detail how to access Gnosis Safe Apps (#615)

* feat: detail how to access Gnosis Safe Apps
* Update format/aesthetic
* version bump

Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>

Author: yomarion

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.29.0-0.4.2",
+  "version": "1.29.0-0.4.3",
   "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

@@ -251,6 +251,13 @@ export interface LedgerOptions extends CommonWalletOptions {
   customNetwork?: HardwareWalletCustomNetwork
 }
 
+export interface GnosisOptions extends CommonWalletOptions {
+  // For default apps (cf. https://github.com/gnosis/safe-apps-list/issues/new/choose)
+  appName?: string
+  // For other apps, give the URL needed to add a custom app
+  appUrl?: string
+}
+
 //#region torus
 
 interface VerifierStatus {

src/modules/select/wallets/gnosis.ts

@@ -1,6 +1,6 @@
 import type SafeAppsSDK from '@gnosis.pm/safe-apps-sdk'
 import type { SafeInfo } from '@gnosis.pm/safe-apps-sdk'
-import { CommonWalletOptions, Helpers, WalletModule } from '../../../interfaces'
+import { GnosisOptions, Helpers, WalletModule } from '../../../interfaces'
 import gnosisWalletIcon from '../wallet-icons/icon-gnosis'
 
 const getSafe = (sdk: SafeAppsSDK): Promise<SafeInfo | undefined> =>
@@ -20,11 +20,16 @@ export const checkGnosisSafeContext = async (selectWallet: () => void) =>
   !!(await getSafe(new (await import('@gnosis.pm/safe-apps-sdk')).default())) &&
   selectWallet()
 
-function gnosis(options: CommonWalletOptions): WalletModule {
+function gnosis(options: GnosisOptions): WalletModule {
   const { preferred, label, iconSrc, svg, networkId } = options
 
   const network = networkId === 4 ? 'rinkeby.' : ''
   const link = `https://${network}gnosis-safe.io/app`
+  const safeAppMessage = options.appName
+    ? `Then go to APPS and select <b>${options.appName}</b>.`
+    : options.appUrl
+    ? `Then go to APPS and add a custom app with the URL:<br /><b>${options.appUrl}</b>`
+    : ''
 
   return {
     name: label || 'Gnosis Safe',
@@ -51,7 +56,8 @@ function gnosis(options: CommonWalletOptions): WalletModule {
     link,
     installMessage: () => `
         <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
-            Click the button below to open the Gnosis Safe interface.
+            Click the button below to open the Gnosis Safe interface.<br />
+            ${safeAppMessage}
         </p>
         `,
     desktop: true,