Adds coinbase-wallet-sdk (#904)

* Adds coinbase-wallet-sdk

* Add documentation link

* updates

* Updates reference

* [feedback] rename

* [feedback] update walletlink version

* Delete yarn.lock

* Add CI

Co-authored-by: Aaron Barnard <abarnard@protonmail.com>

Author: erin-at-work

.circleci/config.yml

@@ -191,6 +191,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/magic
     steps:
       - node-build-steps
+  build-coinbase:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/coinbase
+    steps:
+      - node-build-steps
 
 workflows:
   version: 2
@@ -259,3 +265,7 @@ workflows:
     jobs:
       - build-magic:
           <<: *deploy_production_filters
+  coinbase:
+    jobs:
+      - build-coinbase:
+          <<: *deploy_production_filters

packages/coinbase/README.md

@@ -0,0 +1,40 @@
+# @web3-onboard/coinbase
+
+## Wallet module for connecting Coinbase Wallet SDK to web3-onboard
+See [Coinbase Wallet Developer Docs](https://docs.cloud.coinbase.com/wallet-sdk/docs)
+
+### Install
+
+`npm i @web3-onboard/coinbase`
+
+## Options
+
+```typescript
+type CoinbaseWalletOptions = {
+  darkMode: boolean // default = false
+}
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import coinbaseWalletModule from '@web3-onboard/coinbase'
+
+// 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/coinbase/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@web3-onboard/coinbase",
+  "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/coinbase/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/coinbase/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/coinbase/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"],
+  }
+}

packages/walletlink/README.md

@@ -1,6 +1,7 @@
 # @web3-onboard/walletlink
 
-## Wallet module for connecting WalletLink to web3-onboard
+## (Deprecated) Wallet module for connecting WalletLink to web3-onboard
+_Use [@web3-onboard/coinbase-wallet-sdk](../coinbase/README.md)_
 
 ### Install
 

packages/walletlink/package.json

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

packages/walletlink/src/index.ts

@@ -51,4 +51,7 @@ function walletLink(options?: { darkMode?: boolean }): WalletInit {
   }
 }
 
+/**
+ * @deprecated Use @web3-onboard/coinbase
+ */
 export default walletLink

yarn.lock

@@ -191,6 +191,25 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@coinbase/wallet-sdk@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.0.5.tgz#d9eb49b482570e93ef9fd0bfe15c5582e28b3063"
+  integrity sha512-MsPhgS9b9DpNQdbuYEFDZToPVhh8OQZFkLH59LpYHXRxRIjQDsGGjXcLC50jfW06ElBbtB9adl5RlJTmXb9KbA==
+  dependencies:
+    "@metamask/safe-event-emitter" "2.0.0"
+    bind-decorator "^1.0.11"
+    bn.js "^5.1.1"
+    clsx "^1.1.0"
+    eth-block-tracker "4.4.3"
+    eth-json-rpc-filters "4.2.2"
+    eth-rpc-errors "4.0.2"
+    js-sha256 "0.9.0"
+    json-rpc-engine "6.1.0"
+    keccak "^3.0.1"
+    preact "^10.5.9"
+    rxjs "^6.6.3"
+    stream-browserify "^3.0.0"
+
 "@cspotcode/source-map-consumer@0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"