[fix] Duplicate coinbase wallets (#987)

* [fix] Duplicate coinbase wallets
* Minor refactor

Author: taylorjdawson

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Coinbase Wallet module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",

packages/coinbase/src/index.ts

@@ -1,54 +1,57 @@
 import { WalletInit } from '@web3-onboard/common'
 
-function coinbaseWallet(options?: { darkMode?: boolean }): WalletInit {
-  const { darkMode = false } = options || {}
-
-  return () => {
-    return {
-      label: 'Coinbase',
-      getIcon: async () => (await import('./icon.js')).default,
-      getInterface: async ({ chains, appMetadata }) => {
-        const [chain] = chains
-        const { name, icon } = appMetadata || {}
-
-        const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
-
-        const base64 = window.btoa(icon || '')
-        const appLogoUrl = `data:image/svg+xml;base64,${base64}`
-
-        const instance = new CoinbaseWalletSDK({
-          appName: name || '',
-          appLogoUrl,
-          darkMode
-        })
-
-        const coinbaseWalletProvider = instance.makeWeb3Provider(
-          chain.rpcUrl,
-          parseInt(chain.id)
-        )
-
-        // patch the chainChanged event
-        const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider)
-        coinbaseWalletProvider.on = (event, listener) => {
-          on(event, val => {
-            if (event === 'chainChanged') {
-              listener(`0x${(val as number).toString(16)}`)
-              return
+function coinbaseWallet({
+  darkMode = false
+}: {
+  darkMode?: boolean
+}): WalletInit {
+  return ({ device }) =>
+    device.type === 'mobile'
+      ? {
+          label: 'Coinbase',
+          getIcon: async () => (await import('./icon.js')).default,
+          getInterface: async ({ chains, appMetadata }) => {
+            const [chain] = chains
+            const { name, icon } = appMetadata || {}
+
+            const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
+
+            const base64 = window.btoa(icon || '')
+            const appLogoUrl = `data:image/svg+xml;base64,${base64}`
+
+            const instance = new CoinbaseWalletSDK({
+              appName: name || '',
+              appLogoUrl,
+              darkMode
+            })
+
+            const coinbaseWalletProvider = instance.makeWeb3Provider(
+              chain.rpcUrl,
+              parseInt(chain.id)
+            )
+
+            // patch the chainChanged event
+            const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider)
+            coinbaseWalletProvider.on = (event, listener) => {
+              on(event, val => {
+                if (event === 'chainChanged') {
+                  listener(`0x${(val as number).toString(16)}`)
+                  return
+                }
+
+                listener(val)
+              })
+
+              return coinbaseWalletProvider
             }
 
-            listener(val)
-          })
-
-          return coinbaseWalletProvider
-        }
-
-        return {
-          provider: coinbaseWalletProvider,
-          instance
+            return {
+              provider: coinbaseWalletProvider,
+              instance
+            }
+          }
         }
-      }
-    }
-  }
+      : null
 }
 
 export default coinbaseWallet

packages/injected/src/types.ts

@@ -49,7 +49,7 @@ export enum ProviderLabel {
   Bitpie = 'Bitpie',
   BlockWallet = 'BlockWallet',
   Brave = 'Brave Wallet',
-  Coinbase = 'Coinbase Wallet',
+  Coinbase = 'Coinbase',
   Dcent = `D'CENT`,
   Detected = 'Detected Wallet',
   Frame = 'Frame',