Adds coinbase-wallet-sdk

packages/coinbasewallet/README.md

@@ -0,0 +1,39 @@
+# @web3-onboard/coinbase-wallet-sdk
+
+## Wallet module for connecting WalletLink to web3-onboard
+
+### Install
+
+`npm i @web3-onboard/coinbase-wallet-sdk`
+
+## Options
+
+```typescript
+type WalletLinkOptions = {
+  darkMode: boolean // default = false
+}
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import coinbaseWalletModule from '@web3-onboard/coinbase-wallet-sdk'
+
+// initialize the module with options
+const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true })
+
+// can also initialize with no options...
+// const coinbaseWalletSdk = coinbaseWalletSdk()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    coinbaseWalletSdk
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/coinbasewallet/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@web3-onboard/coinbase-wallet-sdk",
+  "version": "2.0.0",
+  "description": "Coinbase Wallet module for web3-onboard",
+  "module": "dist/index.js",
+  "browser": "dist/index.js",
+  "main": "dist/index.js",
+  "type": "module",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "type-check": "tsc --noEmit"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "@web3-onboard/common": "^2.0.0",
+    "@coinbase/wallet-sdk": "^3.0.5"
+  }
+}

packages/coinbasewallet/src/icon.ts

@@ -0,0 +1,6 @@
+export default `
+  <svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#1652F0"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.45508 20.0006C5.45508 28.0338 11.9673 34.546 20.0006 34.546C28.0338 34.546 34.546 28.0338 34.546 20.0006C34.546 11.9673 28.0338 5.45508 20.0006 5.45508C11.9673 5.45508 5.45508 11.9673 5.45508 20.0006ZM17.3137 15.3145C16.2091 15.3145 15.3137 16.2099 15.3137 17.3145V22.6882C15.3137 23.7928 16.2091 24.6882 17.3137 24.6882H22.6874C23.792 24.6882 24.6874 23.7928 24.6874 22.6882V17.3145C24.6874 16.2099 23.792 15.3145 22.6874 15.3145H17.3137Z" fill="white"/>
+  </svg>
+`

packages/coinbasewallet/src/index.ts

@@ -0,0 +1,54 @@
+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
+            }
+
+            listener(val)
+          })
+
+          return coinbaseWalletProvider
+        }
+
+        return {
+          provider: coinbaseWalletProvider,
+          instance
+        }
+      }
+    }
+  }
+}
+
+export default coinbaseWallet

packages/coinbasewallet/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declarationDir": "dist",
+    "paths": {
+      "*": ["./src/*", "./node_modules/*"]
+    },
+    "typeRoots": ["node_modules/@types"],
+  }
+}