Release 2.15.0

.circleci/config.yml

@@ -327,6 +327,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-build-steps
+  build-transaction-preview:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -491,6 +497,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-staging-build-steps
+  build-staging-transaction-preview:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -657,3 +669,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-uauth:
           <<: *deploy_staging_filters
+  transaction-preview:
+    jobs:
+      - build-transaction-preview:
+          <<: *deploy_production_filters
+      - build-staging-transaction-preview:
+          <<: *deploy_staging_filters

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.14.2",
+  "version": "2.15.0",
   "private": true,
   "workspaces": {
     "packages": [

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "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",
@@ -58,7 +58,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@coinbase/wallet-sdk": "^3.0.5",
+    "@coinbase/wallet-sdk": "^3.6.0",
     "@web3-onboard/common": "^2.2.3"
   }
 }

packages/coinbase/src/index.ts

@@ -13,12 +13,22 @@ function coinbaseWallet({
         const [chain] = chains
         const { name, icon } = appMetadata || {}
 
-        const { CoinbaseWalletSDK } = await import('@coinbase/wallet-sdk')
+        // according to https://github.com/wagmi-dev/wagmi/issues/383
+        // @coinbase/wallet-sdk export double default fields
+        // so we need to detect it to get the real constructor
+        const { default: CoinbaseWalletSDK } = await import(
+          '@coinbase/wallet-sdk'
+        )
+        const CoinbaseWalletSDKConstructor = (
+          (CoinbaseWalletSDK as any).default
+            ? (CoinbaseWalletSDK as any).default
+            : CoinbaseWalletSDK
+        ) as typeof CoinbaseWalletSDK
 
         const base64 = window.btoa(icon || '')
         const appLogoUrl = `data:image/svg+xml;base64,${base64}`
 
-        const instance = new CoinbaseWalletSDK({
+        const instance = new CoinbaseWalletSDKConstructor({
           appName: name || '',
           appLogoUrl,
           darkMode

packages/core/README.md

@@ -33,6 +33,11 @@ type InitOptions {
   apiKey?: string
   notify?: Partial<NotifyOptions>
   connect?: Partial<ConnectModalOptions>
+  gas?: typeof gas
+  /**
+   * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
+   */
+  containerElements?: Partial<ContainerElements>
 }
 ```
 
@@ -78,13 +83,6 @@ type AppMetadata = {
   explore?: string
   // if your app only supports injected wallets and when no injected wallets detected, recommend the user to install some
   recommendedInjectedWallets?: RecommendedInjectedWallets[]
-  /** Gas module */
-  gas?: typeof gas
-  /**
-   * Object mapping for W3O components with the key being the component and the value the DOM element to mount
-   * the component to. This element must be available at time of package script execution.
-   */
-  containerElements?: Partial<ContainerElements>
 }
 
 type RecommendedInjectedWallets = {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized 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",
@@ -69,6 +69,7 @@
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "@web3-onboard/gas": "^2.0.0",
+    "@web3-onboard/transaction-preview": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
@@ -84,7 +85,7 @@
   "dependencies": {
     "@web3-onboard/common": "^2.2.3",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "^4.4.1",
+    "bnc-sdk": "^4.6.2",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",

packages/core/src/configuration.ts

@@ -8,7 +8,8 @@ export let configuration: Configuration = {
   device: getDevice(),
   initialWalletInit: [],
   gas: null,
-  containerElements: { accountCenter: null }
+  containerElements: { accountCenter: null },
+  transactionPreview: null
 }
 
 export function updateConfiguration(update: Partial<Configuration>): void {

packages/core/src/disconnect.ts

@@ -1,4 +1,4 @@
-import { getBlocknativeSdk } from './services.js'
+import { getBNMulitChainSdk } from './services.js'
 import { state } from './store/index.js'
 import { removeWallet } from './store/actions.js'
 import { disconnectWallet$ } from './streams.js'
@@ -15,7 +15,7 @@ async function disconnect(options: DisconnectOptions): Promise<WalletState[]> {
 
   if (state.get().notify.enabled) {
     // handle unwatching addresses
-    const sdk = await getBlocknativeSdk()
+    const sdk = await getBNMulitChainSdk()
 
     if (sdk) {
       const wallet = state.get().wallets.find(wallet => wallet.label === label)

packages/core/src/index.ts

@@ -3,7 +3,7 @@ import connectWallet from './connect.js'
 import disconnectWallet from './disconnect.js'
 import setChain from './chain.js'
 import { state } from './store/index.js'
-import { reset$ } from './streams.js'
+import { reset$, wallets$ } from './streams.js'
 import initI18N from './i18n/index.js'
 import App from './views/Index.svelte'
 import type { InitOptions, Notify } from './types.js'
@@ -29,6 +29,8 @@ import {
   setWalletModules,
   updateConnectModal
 } from './store/actions.js'
+import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview'
+import { getBlocknativeSdk } from './services'
 
 const API = {
   connectWallet,
@@ -90,7 +92,8 @@ function init(options: InitOptions): OnboardAPI {
     notify,
     gas,
     connect,
-    containerElements
+    containerElements,
+    transactionPreview
   } = options
 
   updateConfiguration({ containerElements })
@@ -197,9 +200,26 @@ function init(options: InitOptions): OnboardAPI {
     svelteInstance: app,
     apiKey,
     initialWalletInit: wallets,
-    gas
+    gas,
+    transactionPreview
   })
 
+  if (transactionPreview) {
+    const getBnSDK = async () => {
+      transactionPreview.init({
+        containerElement: '#transaction-preview-container',
+        sdk: await getBlocknativeSdk(),
+        apiKey
+      })
+      wallets$.subscribe(wallets => {
+        wallets.forEach(({ provider }) => {
+          transactionPreview.patchProvider(provider as PatchedEIP1193Provider)
+        })
+      })
+    }
+    getBnSDK()
+  }
+
   return API
 }
 

packages/core/src/provider.ts

@@ -8,7 +8,7 @@ import { updateAccount, updateWallet } from './store/actions.js'
 import { validEnsChain } from './utils.js'
 import disconnect from './disconnect.js'
 import { state } from './store/index.js'
-import { getBlocknativeSdk } from './services.js'
+import { getBNMulitChainSdk } from './services.js'
 
 import type {
   ChainId,
@@ -157,7 +157,7 @@ export function trackWallet(
     // if not existing account and notifications,
     // then subscribe to transaction events
     if (state.get().notify.enabled && !existingAccount) {
-      const sdk = await getBlocknativeSdk()
+      const sdk = await getBNMulitChainSdk()
 
       if (sdk) {
         const wallet = state
@@ -227,7 +227,7 @@ export function trackWallet(
     if (chainId === connectedWalletChain.id) return
 
     if (state.get().notify.enabled) {
-      const sdk = await getBlocknativeSdk()
+      const sdk = await getBNMulitChainSdk()
 
       if (sdk) {
         const wallet = state

packages/core/src/services.ts

@@ -1,25 +1,49 @@
 import type { MultiChain } from 'bnc-sdk'
+import type SDK from 'bnc-sdk'
 import { configuration } from './configuration.js'
 import { handleTransactionUpdates } from './notify.js'
 
-let blocknativeSdk: MultiChain
+let blocknativeMultiChainSdk: MultiChain
+let blocknativeSdk: SDK
 
 /**
  *
- * @returns SDK if apikey
+ * @returns MultiChain SDK if apiKey
  */
-export async function getBlocknativeSdk(): Promise<MultiChain | null> {
+
+export async function getBNMulitChainSdk(): Promise<MultiChain | null> {
   const { apiKey } = configuration
 
   if (!apiKey) return null
 
-  if (!blocknativeSdk) {
+  if (!blocknativeMultiChainSdk) {
     const { default: Blocknative } = await import('bnc-sdk')
-    blocknativeSdk = Blocknative.multichain({
+    blocknativeMultiChainSdk = Blocknative.multichain({
       apiKey: configuration.apiKey
     })
 
-    blocknativeSdk.transactions$.subscribe(handleTransactionUpdates)
+    blocknativeMultiChainSdk.transactions$.subscribe(handleTransactionUpdates)
+  }
+
+  return blocknativeMultiChainSdk
+}
+
+/**
+ *
+ * @returns SDK if apiKey
+ */
+export async function getBlocknativeSdk(): Promise<SDK> {
+  const { apiKey } = configuration
+
+  if (!apiKey) return null
+
+  if (!blocknativeSdk) {
+    const { default: Blocknative } = await import('bnc-sdk')
+    blocknativeSdk = new Blocknative({
+      dappId: configuration.apiKey,
+      networkId: 1
+    })
+    return blocknativeSdk
   }
 
   return blocknativeSdk

packages/core/src/types.ts

@@ -12,6 +12,7 @@ import type {
 } from '@web3-onboard/common'
 
 import type gas from '@web3-onboard/gas'
+import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview'
 
 import type en from './i18n/en.json'
 import type { EthereumTransactionData, Network } from 'bnc-sdk'
@@ -53,10 +54,15 @@ export interface InitOptions {
   /** Gas module */
   gas?: typeof gas
   /**
-   * Object mapping for W3O components with the key being the DOM element to mount
-   * the component to, this defines the DOM container element for svelte to attach the component
+   * Object mapping for W3O components with the key being the DOM
+   * element to mount the component to, this defines the DOM container
+   *  element for svelte to attach the component
    */
   containerElements?: Partial<ContainerElements>
+  /**
+   * Transaction Preview module
+   */
+  transactionPreview?: TransactionPreviewAPI
 }
 
 export interface ConnectOptions {
@@ -137,6 +143,7 @@ export type Configuration = {
   apiKey?: string
   gas?: typeof gas
   containerElements?: ContainerElements
+  transactionPreview?: TransactionPreviewAPI
 }
 
 export type Locale = string

packages/core/src/validation.ts

@@ -185,7 +185,11 @@ const initOptions = Joi.object({
     stream: Joi.function().required()
   }),
   connect: connectModalOptions,
-  containerElements: containerElements
+  containerElements: containerElements,
+  transactionPreview: Joi.object({
+    patchProvider: Joi.function().required(),
+    init: Joi.function().required()
+  })
 })
 
 const connectOptions = Joi.object({