feat: metamask sdk integration (#1908)

* feat: initial commit - sdk integration * feat: metamask sdk working integration * feat: update metamask sdk 0.6.2 * feat: update example * feat: cleanup imports * feat: remove unused code * feat: cleanup for PR * Update packages/core/src/disconnect.ts * Update packages/core/src/disconnect.ts * Update packages/metamask/package.json * Add MetaMask sdk to demo package for testing * Remove yarn.lock from MM package * Update MetaMask provider to import modules dynamically on select of MM in client, remove SDK from wallet name as that is customer facing * Return docs yarn lock * Reorder MM wallet to be first along with injected wallets so the SDK instance takes precidence * Get upstream docs yarn.lock * feat: upgrade sdk to 0.10. * Add MetaMask to wallet docs * Update docs pages * Refine docs and README * Add metamask package to docs * Revert changes to docs yarn.lock --------- Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>
blocknative · Oct 23, 2023 · 0c83bdf · 0c83bdf
1 parent 2436a4d
commit 0c83bdf
Show file tree

Hide file tree

Showing 29 changed files with 934 additions and 12 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.16.0
diff --git a/docs/package.json b/docs/package.json
@@ -70,6 +70,7 @@
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "^2.5.1",
     "@web3-onboard/magic": "^2.1.7",
+    "@web3-onboard/metamask": "^2.0.0-alpha.1",
     "@web3-onboard/mew-wallet": "^2.0.4",
     "@web3-onboard/phantom": "^2.0.3",
     "@web3-onboard/portis": "^2.1.7",

diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js
@@ -36,6 +36,7 @@ const intiOnboard = async (theme) => {
   const { default: walletConnectModule } = await import('@web3-onboard/walletconnect')
   const { default: infinityWalletModule } = await import('@web3-onboard/infinity-wallet')
   const { default: coinbaseModule } = await import('@web3-onboard/coinbase')
+  const { default: metamaskModule } = await import('@web3-onboard/metamask')
   const { default: dcentModule } = await import('@web3-onboard/dcent')
   const { default: portisModule } = await import('@web3-onboard/portis')
   const { default: magicModule } = await import('@web3-onboard/magic')
@@ -65,6 +66,11 @@ const intiOnboard = async (theme) => {
     clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb'
   })
   const coinbase = coinbaseModule()
+  const metamask = metamaskModule({options: {
+    dappMetadata: {
+      name: 'Web3Onboard',
+    }
+  }})
   const dcent = dcentModule()
   const walletConnect = walletConnectModule({
     projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
@@ -124,6 +130,7 @@ const intiOnboard = async (theme) => {
   return Onboard({
     connect: { autoConnectAllPreviousWallet: true },
     wallets: [
+      metamask,
       injected,
       walletConnect,
       coinbase,

diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -64,14 +64,14 @@ If you would like to support all wallets, then you can install all of the wallet
 <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/arcana-auth @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
+yarn add @web3-onboard/coinbase @web3-onboard/metamask @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/arcana-auth @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
 ```
 
   </TabPanel>
   <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/arcana-auth @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
+npm install @web3-onboard/coinbase @web3-onboard/metamask @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/arcana-auth @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
 ```
 
   </TabPanel>

diff --git a/docs/src/routes/docs/[...4]wallets/[...18]metamask/+page.md b/docs/src/routes/docs/[...4]wallets/[...18]metamask/+page.md
@@ -0,0 +1,74 @@
+---
+title: MetaMask
+---
+
+# {$frontmatter.title}
+
+## Wallet module for connecting MetaMask Wallet SDK to web3-onboard
+
+The MetaMask Web3-Onboard module provides a reliable, secure, and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile.
+See [MetaMask SDK Developer Docs](https://github.com/MetaMask/metamask-sdk)
+
+:::
+
+## Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/metamask
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/metamask
+```
+
+  </TabPanel>
+</Tabs>
+
+## Options
+
+```typescript
+// For a complete list of options check https://github.com/MetaMask/metamask-sdk
+interface MetaMaskSDKOptions {
+  dappMetadata: {
+    url?: string;
+    name?: string;
+    base64Icon?: string;
+  },
+  /**
+   * If MetaMask browser extension is detected, directly use it without prompting the user.
+   */
+  extensionOnly?: boolean;
+}
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import metamaskSDK from '@web3-onboard/metamask'
+
+// initialize the module with options
+const metamaskSDKWallet = metamaskSDK({options: {
+  extensionOnly: false,
+  dappMetadata: {
+    name: 'Demo Web3Onboard'
+  }
+}})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    metamaskSDKWallet
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```
diff --git a/...es/docs/[...4]wallets/[...18]mew/+page.md → ...es/docs/[...4]wallets/[...19]mew/+page.md b/...es/docs/[...4]wallets/[...18]mew/+page.md → ...es/docs/[...4]wallets/[...19]mew/+page.md
diff --git a/...s/[...4]wallets/[...19]mewwallet/+page.md → ...s/[...4]wallets/[...20]mewwallet/+page.md b/...s/[...4]wallets/[...19]mewwallet/+page.md → ...s/[...4]wallets/[...20]mewwallet/+page.md
diff --git a/...ocs/[...4]wallets/[...20]phantom/+page.md → ...ocs/[...4]wallets/[...21]phantom/+page.md b/...ocs/[...4]wallets/[...20]phantom/+page.md → ...ocs/[...4]wallets/[...21]phantom/+page.md
diff --git a/...docs/[...4]wallets/[...21]portis/+page.md → ...docs/[...4]wallets/[...22]portis/+page.md b/...docs/[...4]wallets/[...21]portis/+page.md → ...docs/[...4]wallets/[...22]portis/+page.md
diff --git a/...s/docs/[...4]wallets/[...22]taho/+page.md → ...s/docs/[...4]wallets/[...23]taho/+page.md b/...s/docs/[...4]wallets/[...22]taho/+page.md → ...s/docs/[...4]wallets/[...23]taho/+page.md
diff --git a/...ocs/[...4]wallets/[...23]tallyho/+page.md → ...ocs/[...4]wallets/[...24]tallyho/+page.md b/...ocs/[...4]wallets/[...23]tallyho/+page.md → ...ocs/[...4]wallets/[...24]tallyho/+page.md
diff --git a/.../docs/[...4]wallets/[...24]torus/+page.md → .../docs/[...4]wallets/[...25]torus/+page.md b/.../docs/[...4]wallets/[...24]torus/+page.md → .../docs/[...4]wallets/[...25]torus/+page.md
diff --git a/...docs/[...4]wallets/[...25]trezor/+page.md → ...docs/[...4]wallets/[...26]trezor/+page.md b/...docs/[...4]wallets/[...25]trezor/+page.md → ...docs/[...4]wallets/[...26]trezor/+page.md
diff --git a/.../docs/[...4]wallets/[...26]uauth/+page.md → .../docs/[...4]wallets/[...27]uauth/+page.md b/.../docs/[...4]wallets/[...26]uauth/+page.md → .../docs/[...4]wallets/[...27]uauth/+page.md
diff --git a/.../docs/[...4]wallets/[...27]venly/+page.md → .../docs/[...4]wallets/[...28]venly/+page.md b/.../docs/[...4]wallets/[...27]venly/+page.md → .../docs/[...4]wallets/[...28]venly/+page.md
diff --git a/.....4]wallets/[...28]walletconnect/+page.md → .....4]wallets/[...29]walletconnect/+page.md b/.....4]wallets/[...28]walletconnect/+page.md → .....4]wallets/[...29]walletconnect/+page.md
diff --git a/.../[...4]wallets/[...29]walletlink/+page.md → .../[...4]wallets/[...30]walletlink/+page.md b/.../[...4]wallets/[...29]walletlink/+page.md → .../[...4]wallets/[...30]walletlink/+page.md
diff --git a/...cs/[...4]wallets/[...30]web3auth/+page.md → ...cs/[...4]wallets/[...31]web3auth/+page.md b/...cs/[...4]wallets/[...30]web3auth/+page.md → ...cs/[...4]wallets/[...31]web3auth/+page.md
diff --git a/.../docs/[...4]wallets/[...31]xdefi/+page.md → .../docs/[...4]wallets/[...32]xdefi/+page.md b/.../docs/[...4]wallets/[...31]xdefi/+page.md → .../docs/[...4]wallets/[...32]xdefi/+page.md
diff --git a/...s/docs/[...4]wallets/[...32]zeal/+page.md → ...s/docs/[...4]wallets/[...33]zeal/+page.md b/...s/docs/[...4]wallets/[...32]zeal/+page.md → ...s/docs/[...4]wallets/[...33]zeal/+page.md
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -46,6 +46,7 @@
     "@web3-onboard/keystone": "^2.3.7",
     "@web3-onboard/ledger": "^2.5.2",
     "@web3-onboard/magic": "^2.1.6",
+    "@web3-onboard/metamask": "^2.0.0-alpha.1",
     "@web3-onboard/mew-wallet": "^2.0.3",
     "@web3-onboard/phantom": "^2.0.3",
     "@web3-onboard/portis": "^2.1.6",

diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -22,6 +22,7 @@
   import xdefiWalletModule from '@web3-onboard/xdefi'
   import zealModule from '@web3-onboard/zeal'
   import transactionPreviewModule from '@web3-onboard/transaction-preview'
+  import metamaskSDK from '@web3-onboard/metamask'
   import enkryptModule from '@web3-onboard/enkrypt'
   import mewWalletModule from '@web3-onboard/mew-wallet'
   import uauthModule from '@web3-onboard/uauth'
@@ -79,7 +80,11 @@
     // displayUnavailable: true,
     // ||
     // display specific unavailable wallets
-    displayUnavailable: [ProviderLabel.MetaMask, ProviderLabel.Trust, ProviderLabel.Phantom]
+    displayUnavailable: [
+      ProviderLabel.MetaMask,
+      ProviderLabel.Trust,
+      ProviderLabel.Phantom
+    ]
     // but only show Binance and Bitski wallet if they are available
     // filter: {
     //   [ProviderLabel.Binance]: 'unavailable',
@@ -116,6 +121,18 @@
 
   const coinbaseWallet = coinbaseModule()
 
+  const metamaskSDKWallet = metamaskSDK({
+    options: {
+      extensionOnly: false,
+      i18nOptions: {
+        enabled: true
+      },
+      dappMetadata: {
+        name: 'Demo Web3Onboard'
+      }
+    }
+  })
+
   const walletConnect = walletConnectModule({
     handleUri: uri => console.log(uri),
     projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
@@ -144,14 +161,14 @@
   const keepkey = keepkeyModule()
   const keystone = keystoneModule()
   const safe = safeModule()
-  const tallyho = tallyHoModule()
   const xdefi = xdefiWalletModule()
   const zeal = zealModule()
   const phantom = phantomModule()
   const trust = trustModule()
   const frontier = frontierModule()
   const cedeStore = cedeStoreModule()
   const blocto = bloctoModule()
+  const tallyho = tallyHoModule()
 
   const trezorOptions = {
     email: 'test@test.com',
@@ -193,6 +210,7 @@
 
   const onboard = Onboard({
     wallets: [
+      metamaskSDKWallet,
       injected,
       ledger,
       trezor,

diff --git a/packages/demo/yarn.lock b/packages/demo/yarn.lock
@@ -5580,6 +5580,13 @@ cross-fetch@^4.0.0:
   dependencies:
     node-fetch "^2.6.12"
 
+cross-fetch@^3.1.6:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
+  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
+  dependencies:
+    node-fetch "^2.6.12"
+
 cross-spawn@^7.0.1, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -10671,6 +10678,11 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -10807,6 +10819,15 @@ usb@^2.9.0:
     node-addon-api "^7.0.0"
     node-gyp-build "^4.5.0"
 
+usb@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/usb/-/usb-2.10.0.tgz#c582b62d709c85d63c76a9864fc670d6ad65928b"
+  integrity sha512-FbzLhziRs4rHnTDZX+eKl9yBVjiuMNX+opl0r8TFPj265PuNtqak3qw5c8DLpBwq3z1JZgAOgm5Nn7cV30nCxg==
+  dependencies:
+    "@types/w3c-web-usb" "^1.0.6"
+    node-addon-api "^7.0.0"
+    node-gyp-build "^4.5.0"
+
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"

diff --git a/packages/metamask/README.md b/packages/metamask/README.md
@@ -0,0 +1,52 @@
+# @web3-onboard/metamask
+
+## Wallet module for connecting MetaMask Wallet SDK to web3-onboard
+The MetaMask Web3-Onboard module provides a reliable, secure, and seamless connection from your dapp to the MetaMask browser extension and MetaMask Mobile.
+See [MetaMask SDK Developer Docs](https://github.com/MetaMask/metamask-sdk)
+
+### Install
+
+`npm i @web3-onboard/metamask`
+
+## Options
+
+```typescript
+// For a complete list of options check https://github.com/MetaMask/metamask-sdk
+interface MetaMaskSDKOptions {
+  dappMetadata: {
+    url?: string;
+    name?: string;
+    base64Icon?: string;
+  },
+  /**
+   * If MetaMask browser extension is detected, directly use it without prompting the user.
+   */
+  extensionOnly?: boolean;
+}
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import metamaskSDK from '@web3-onboard/metamask'
+
+// initialize the module with options
+const metamaskSDKWallet = metamaskSDK({options: {
+  extensionOnly: false,
+  dappMetadata: {
+    name: 'Demo Web3Onboard'
+  }
+}})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    metamaskSDKWallet
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```
diff --git a/packages/metamask/package.json b/packages/metamask/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@web3-onboard/metamask",
+  "version": "2.0.0-alpha.1",
+  "description": "MetaMask SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
+  "keywords": [
+    "Ethereum",
+    "Web3",
+    "EVM",
+    "dapp",
+    "Multichain",
+    "Wallet",
+    "Transaction",
+    "Provider",
+    "Hardware Wallet",
+    "Notifications",
+    "React",
+    "Svelte",
+    "Vue",
+    "Next",
+    "Nuxt",
+    "MetaMask",
+    "Coinbase",
+    "WalletConnect",
+    "Ledger",
+    "Trezor",
+    "Connect Wallet",
+    "Ethereum Hooks",
+    "Blocknative",
+    "Mempool",
+    "pending",
+    "confirmed",
+    "Injected Wallet",
+    "Crypto",
+    "Crypto Wallet"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blocknative/web3-onboard.git",
+    "directory": "packages/metamask"
+  },
+  "homepage": "https://onboard.blocknative.com",
+  "bugs": "https://github.com/blocknative/web3-onboard/issues",
+  "module": "dist/index.js",
+  "browser": "dist/index.js",
+  "main": "dist/index.js",
+  "type": "module",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.7",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@metamask/sdk": "^0.10.0",
+    "@web3-onboard/common": "^2.3.3"
+  }
+}