1.25.0-0.1.0: [feature] gnosis safe wallet (#551)

* 1.25.0-0.1.0: [feature] Gnosis Wallet

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.25.0",
+  "version": "1.25.0-0.1.0",
   "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",
@@ -54,6 +54,8 @@
   },
   "dependencies": {
     "@cvbb/eth-keyring": "^1.1.0",
+    "@gnosis.pm/safe-apps-provider": "^0.3.0",
+    "@gnosis.pm/safe-apps-sdk": "^2.3.0",
     "@ledgerhq/hw-app-eth": "^5.21.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
     "@portis/web3": "^4.0.0",

rollup.config.js

@@ -82,6 +82,8 @@ export default {
     'web3-provider-engine/subproviders/rpc',
     'web3-provider-engine/subproviders/subscriptions',
     'web3-provider-engine/subproviders/filters',
-    'eth-provider'
+    'eth-provider',
+    '@gnosis.pm/safe-apps-sdk',
+    '@gnosis.pm/safe-apps-provider'
   ]
 }

src/interfaces.ts

@@ -120,7 +120,7 @@ export interface WalletModule {
     interface: WalletInterface | null
     instance?: any
   }>
-  type: 'hardware' | 'injected' | 'sdk'
+  type: WalletType
   link?: string
   installMessage?: (wallets: {
     currentWallet: string | undefined
@@ -132,6 +132,8 @@ export interface WalletModule {
   osExclusions?: Array<string>
 }
 
+export type WalletType = 'hardware' | 'injected' | 'sdk'
+
 export interface Helpers {
   getProviderName: (provider: any) => string | undefined
   createLegacyProviderInterface: (provider: any) => WalletInterface
@@ -179,6 +181,7 @@ export interface CommonWalletOptions {
   label?: string
   iconSrc?: string
   svg?: string
+  networkId?: number
 }
 
 export interface SdkWalletOptions extends CommonWalletOptions {

src/modules/select/index.ts

@@ -139,6 +139,8 @@ function getModule(
       return import('./wallets/alphawallet')
     case 'ownbit':
       return import('./wallets/ownbit')
+    case 'gnosis':
+      return import('./wallets/gnosis')
     default:
       throw new Error(`${name} is not a valid walletName.`)
   }

src/modules/select/wallet-icons/icon-gnosis.ts

@@ -0,0 +1,11 @@
+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>`
+
+export default gnosisWalletIcon

src/modules/select/wallets/gnosis.ts

@@ -0,0 +1,54 @@
+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 gnosisWalletIcon from '../wallet-icons/icon-gnosis'
+
+const getSafe = (sdk: SafeAppsSDK): Promise<SafeInfo | undefined> => {
+  return Promise.race([
+    sdk.getSafeInfo(),
+    // Timeout need as this method hangs until it can find the safe info
+    new Promise<undefined>(resolve => setTimeout(resolve, 200))
+  ])
+}
+
+function gnosis(options: CommonWalletOptions): WalletModule {
+  const { preferred, label, iconSrc, svg, networkId } = options
+
+  const network = networkId === 4 ? 'rinkeby.' : ''
+  const link = `https://${network}gnosis-safe.io/app`
+
+  return {
+    name: label || 'Gnosis Safe Wallet',
+    iconSrc,
+    svg: svg || gnosisWalletIcon,
+    wallet: async ({ createModernProviderInterface }: Helpers) => {
+      const sdk = new (await import('@gnosis.pm/safe-apps-sdk')).default()
+      const { SafeAppProvider } = await import('@gnosis.pm/safe-apps-provider')
+
+      const safe: SafeInfo | undefined = await getSafe(sdk)
+      // Checks if we are within the safe app context
+      if (!safe) return { provider: undefined, interface: null }
+
+      const provider = new SafeAppProvider(safe, sdk)
+      return {
+        provider,
+        interface: {
+          ...createModernProviderInterface(provider),
+          connect: () => Promise.resolve([safe.safeAddress])
+        }
+      }
+    },
+    type: 'sdk',
+    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.
+        </p>
+        `,
+    desktop: true,
+    mobile: false,
+    preferred
+  }
+}
+
+export default gnosis

yarn.lock

@@ -1176,6 +1176,21 @@
   resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz#2dc8c57044de0340eb53a7ba602e59abf80dc799"
   integrity sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==
 
+"@gnosis.pm/safe-apps-provider@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-provider/-/safe-apps-provider-0.3.0.tgz#72f212c6965f73a20e805e42cf91b635a814a8be"
+  integrity sha512-QL9NnhEYxbgmxpMmOfhOL1nyUcah9Qg4aBXf0F6QjRVc8OPUOSCrYa3pL2Uqd8pUIo98zvk/n7QBPaxWk08ZAQ==
+  dependencies:
+    "@gnosis.pm/safe-apps-sdk" "2.3.0"
+    events "^3.3.0"
+
+"@gnosis.pm/safe-apps-sdk@2.3.0", "@gnosis.pm/safe-apps-sdk@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-sdk/-/safe-apps-sdk-2.3.0.tgz#10813f065dbf94bb7f1da7c8e1f4ceb8667ef21a"
+  integrity sha512-Psu896peovf21k5pBk/+WQnJUE5Jtj82ILumGfSADP7xD20U6DJT7Z8X9jnb+QZnin6Q5gU57ht2tKmc3T+5lQ==
+  dependencies:
+    semver "^7.3.2"
+
 "@json-rpc-tools/types@^1.6.1":
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/@json-rpc-tools/types/-/types-1.6.4.tgz#8cfda48bcc19d4f643ff21ff56bdc1dce730a1f6"
@@ -3372,6 +3387,11 @@ events@3.2.0, events@^3.0.0, events@^3.1.0, events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
   integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"