diff --git a/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md index 2f6c36723..f02fffba8 100644 --- a/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...6]coinbase/+page.md @@ -29,15 +29,21 @@ npm install @web3-onboard/coinbase ```typescript type CoinbaseWalletOptions = { - /** @optional Use dark theme */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase Use dark theme */ darkMode?: boolean - /** @optional whether to connect mobile web app via WalletLink, defaults to false */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether to connect mobile web app via WalletLink, defaults to false */ enableMobileWalletLink?: boolean - /** @optional whether or not to reload dapp automatically after disconnect, defaults to true */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether or not to reload dapp automatically after disconnect, defaults to true */ reloadOnDisconnect?: boolean + /** Type of Coinbase wallets to support - options : 'all' | 'smartWalletOnly' | 'eoaOnly' - Default to `all` */ + supportedWalletType?: 'all' | 'smartWalletOnly' | 'eoaOnly' } ``` +## Smart Wallet + +Starting at `@web3-onboard/coinbase` version 2.3.0 smart wallet support has been added. A smart wallet lives in your browser, no extensions or app installs needed. Use passkeys for signing, with enterprise-grade security without complex seed phrases. One wallet, one address, works universally across major L2s and onchain apps. [More info on Coinbase smart wallets](https://www.coinbase.com/wallet/smart-wallet). + ## Usage ```typescript @@ -45,7 +51,7 @@ import Onboard from '@web3-onboard/core' import coinbaseWalletModule from '@web3-onboard/coinbase' // initialize the module with options -const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true }) +const coinbaseWalletSdk = coinbaseWalletModule() // can also initialize with no options... // const coinbaseWalletSdk = coinbaseWalletSdk() diff --git a/packages/coinbase/README.md b/packages/coinbase/README.md index 02110bccd..2cfb75d85 100644 --- a/packages/coinbase/README.md +++ b/packages/coinbase/README.md @@ -1,6 +1,7 @@ # @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 @@ -11,15 +12,21 @@ See [Coinbase Wallet Developer Docs](https://docs.cloud.coinbase.com/wallet-sdk/ ```typescript type CoinbaseWalletOptions = { - /** @optional Use dark theme */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase Use dark theme */ darkMode?: boolean - /** @optional whether to connect mobile web app via WalletLink, defaults to false */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether to connect mobile web app via WalletLink, defaults to false */ enableMobileWalletLink?: boolean - /** @optional whether or not to reload dapp automatically after disconnect, defaults to true */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether or not to reload dapp automatically after disconnect, defaults to true */ reloadOnDisconnect?: boolean + /** Type of Coinbase wallets to support - options : 'all' | 'smartWalletOnly' | 'eoaOnly' - Default to `all` */ + supportedWalletType?: 'all' | 'smartWalletOnly' | 'eoaOnly' } ``` +## Smart Wallet + +Starting at `@web3-onboard/coinbase` version 2.3.0 smart wallet support has been added. A smart wallet lives in your browser, no extensions or app installs needed. Use passkeys for signing, with enterprise-grade security without complex seed phrases. One wallet, one address, works universally across major L2s and onchain apps. [More info on Coinbase smart wallets](https://www.coinbase.com/wallet/smart-wallet). + ## Usage ```typescript @@ -27,7 +34,7 @@ import Onboard from '@web3-onboard/core' import coinbaseWalletModule from '@web3-onboard/coinbase' // initialize the module with options -const coinbaseWalletSdk = coinbaseWalletModule({ darkMode: true }) +const coinbaseWalletSdk = coinbaseWalletModule() // can also initialize with no options... // const coinbaseWalletSdk = coinbaseWalletModule() diff --git a/packages/coinbase/package.json b/packages/coinbase/package.json index 6571a3059..1b8eaf2fb 100644 --- a/packages/coinbase/package.json +++ b/packages/coinbase/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/coinbase", - "version": "2.3.0", + "version": "2.4.0-alpha.1", "description": "Coinbase 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", @@ -31,7 +31,8 @@ "confirmed", "Injected Wallet", "Crypto", - "Crypto Wallet" + "Crypto Wallet", + "Smart Wallet" ], "repository": { "type": "git", @@ -58,7 +59,7 @@ "typescript": "^5.4.5" }, "dependencies": { - "@coinbase/wallet-sdk": "3.9.2", + "@coinbase/wallet-sdk": "4.0.3", "@web3-onboard/common": "^2.4.0" } } diff --git a/packages/coinbase/src/index.ts b/packages/coinbase/src/index.ts index c03028370..5ec24f1a7 100644 --- a/packages/coinbase/src/index.ts +++ b/packages/coinbase/src/index.ts @@ -1,23 +1,38 @@ -import { WalletInit } from '@web3-onboard/common' +import { + createEIP1193Provider, + fromHex, + type WalletInit, + type WalletInterface +} from '@web3-onboard/common' function coinbaseWallet({ + supportedWalletType = 'all', darkMode = false, enableMobileWalletLink = false, reloadOnDisconnect = true }: { - /** @optional Use dark theme */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase Use dark theme */ darkMode?: boolean - /** @optional whether to connect mobile web app via WalletLink, defaults to false */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether to connect mobile web app via WalletLink, defaults to false */ enableMobileWalletLink?: boolean - /** @optional whether or not to reload dapp automatically after disconnect, defaults to true */ + /** @deprecated Deprecated after version 2.2.7 of @web3-onboard/coinbase whether or not to reload dapp automatically after disconnect, defaults to true */ reloadOnDisconnect?: boolean + /** Type of Coinbase wallets to support - options : 'all' | 'smartWalletOnly' | 'eoaOnly' - Default to `all` */ + supportedWalletType?: 'all' | 'smartWalletOnly' | 'eoaOnly' } = {}): WalletInit { return () => { return { label: 'Coinbase Wallet', getIcon: async () => (await import('./icon.js')).default, - getInterface: async ({ chains, appMetadata }) => { - const [chain] = chains + getInterface: async ({ + chains, + appMetadata + }): Promise => { + if (enableMobileWalletLink || reloadOnDisconnect || darkMode) { + console.warn( + 'darkMode, enableMobileWalletLink and reloadOnDisconnect init props are deprecated after version 2.2.7 of @web3-onboard/coinbase' + ) + } const { name, icon } = appMetadata || {} // according to /~https://github.com/wagmi-dev/wagmi/issues/383 @@ -31,29 +46,41 @@ function coinbaseWallet({ ? (CoinbaseWalletSDK as any).default : CoinbaseWalletSDK ) as typeof CoinbaseWalletSDK + const { isHex, toHex } = await import('@web3-onboard/common') const base64 = window.btoa(icon || '') const appLogoUrl = `data:image/svg+xml;base64,${base64}` + const appChainIds = chains.map(({ id }) => + fromHex(id as `0x${string}`, 'number') + ) + const instance = new CoinbaseWalletSDKConstructor({ appName: name || '', appLogoUrl, - darkMode, - enableMobileWalletLink, - reloadOnDisconnect + appChainIds }) - const coinbaseWalletProvider = instance.makeWeb3Provider( - chain.rpcUrl, - parseInt(chain.id) - ) + const coinbaseWalletProvider = instance.makeWeb3Provider({ + options: supportedWalletType + }) // patch the chainChanged event const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider) + coinbaseWalletProvider.on = (event, listener) => { + // @ts-ignore on(event, val => { if (event === 'chainChanged') { - listener(`0x${(val as number).toString(16)}`) + let hexVal: string + if (isHex(val)) { + hexVal = val + } else { + hexVal = toHex(val) + } + + // @ts-ignore + listener(hexVal) return } @@ -62,9 +89,11 @@ function coinbaseWallet({ return coinbaseWalletProvider } + const provider = createEIP1193Provider(coinbaseWalletProvider) + provider.removeListener = (event, func) => {} return { - provider: coinbaseWalletProvider, + provider, instance } } diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index 45735c0f1..500fe4f9a 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -13,3 +13,4 @@ export { export * from './types.js' export * from './validation.js' +export { parseEther, isHex, toHex, fromHex } from 'viem' diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 273e16972..4bb76504e 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -1,6 +1,8 @@ import type { ConnectionInfo } from 'ethers/lib/utils' import EventEmitter from 'eventemitter3' import type { TypedData as EIP712TypedData } from 'eip-712' +import type { Address } from 'viem' +export type { Address } from 'viem' export type { TypedData as EIP712TypedData } from 'eip-712' /** @@ -300,7 +302,6 @@ export interface EthSignTransactionRequest { params: [TransactionObject] } -export type Address = `0x${string}` type Message = string export interface EthSignMessageRequest { method: 'eth_sign' diff --git a/packages/demo/package.json b/packages/demo/package.json index 426c9f09f..d41f48879 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -33,7 +33,7 @@ "@web3-onboard/capsule": "2.1.0", "@web3-onboard/cede-store": "^2.3.0", "@web3-onboard/core": "2.22.0", - "@web3-onboard/coinbase": "^2.3.0", + "@web3-onboard/coinbase": "^2.4.0-alpha.1", "@web3-onboard/dcent": "^2.2.7", "@web3-onboard/enkrypt": "^2.1.0", "@web3-onboard/fortmatic": "^2.1.0", diff --git a/yarn.lock b/yarn.lock index 947b6665e..0cfc30acb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -783,16 +783,13 @@ preact "^10.16.0" sha.js "^2.4.11" -"@coinbase/wallet-sdk@3.9.2": - version "3.9.2" - resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.9.2.tgz#757d6652d0972eb8804c50e3923a05242833caf1" - integrity sha512-SyfUlG0DzgRu2WQ8+c7DpFEIe8Bt/nxyP1hcExDUXF7cHaopdAU43djT8SLIWH8Li40ZK9VBGVuNIK/pwHR9LA== +"@coinbase/wallet-sdk@4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-4.0.3.tgz#fd52dd4c168c35979c7b3294018a6f78d163a593" + integrity sha512-y/OGEjlvosikjfB+wk+4CVb9OxD1ob9cidEBLI5h8Hxaf/Qoob2XoVT1uvhtAzBx34KpGYSd+alKvh/GCRre4Q== dependencies: - bn.js "^5.2.1" buffer "^6.0.3" clsx "^1.2.1" - eth-block-tracker "^7.1.0" - eth-json-rpc-filters "^6.0.0" eventemitter3 "^5.0.1" keccak "^3.0.3" preact "^10.16.0"