[core:2.7.0-alpha.2] [ledger:2.1.8-alpha.1] - [feature] - Replacement Transactions (#1195)

* Initial implementation of Gas module

* Working prototype

* Add docs

* Modify API

* Add override poll example and comment

* Remove gas module from demo

* Update usage in core

* Update gas API

* Revert changes to fix types

* Revert changes to types that are in another pr

* Fix docs

* Revert in favor of PR

* Fix Configuration types

* Initial styles

* Style fixes

* Modifies results to be an array rather than a map

* Increments versions

* Increments core version

* Update yarn.lock for joi dep

* Fix ledger error handling

* Update demo

* Add missing txStuck msg

* Handle replacement txs

* Remove test gas fee data

* Add replacement option to docs

* Fix docs

* Code organisation, refactor, error handling

* Adds txReplaceError message

* Fixes error notification

* Add more detail in docs

* Additional documentation

* Update packages/core/README.md

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Author: lnbc1QWFyb24

packages/core/README.md

@@ -145,7 +145,16 @@ The `transactionHandler` can react off any property of the Ethereum TransactionD
 - `Notification.link` - add link to the transaction hash. For instance, a link to the transaction on etherscan
 - `Notification.onClick()` - onClick handler for when user clicks the notification element
 
-Notify can also be styled by using the CSS variables found below. These are setup to allow maximum customization with base styling variables setting the global theme (i.e. `--onboard-grey-600`) along with more precise component level styling variables available (`--notify-onboard-grey-600`) with the latter taking precedent if defined
+Notify can also be styled by using the CSS variables found below. These are setup to allow maximum customization with base styling variables setting the global theme (i.e. `--onboard-grey-600`) along with more precise component level styling variables available (`--notify-onboard-grey-600`) with the latter taking precedent if defined.
+
+Under the following conditions, when a transaction notification is hovered, a dropdown will appear, allowing the user to replace (speedup or cancel) their transaction:
+
+- The [gas](../gas/) module has been passed in to the Web3 Onboard initialization
+- The transaction was initiated on the networks that the gas module can get estimations for (currently Ethereum and Polygon mainnet)
+- The transaction has a pending status (eventCode: 'txPool')
+- The transaction was initiated by a hardware wallet (possibly other wallet types in future as they recognize the `nonce` field)
+
+The replacement gas values can be customized from the defaults by using the `replacement` parameter in the Notify options.
 
 If notifications are enabled the notifications can be handled through onboard app state as seen below.
 
@@ -176,6 +185,14 @@ export type Notify = {
     event: EthereumTransactionData
   ) => TransactionHandlerReturn
   position: CommonPositions
+  replacement?: {
+    gasPriceProbability?: {
+      // define the gas price used for speedup based on the probability of getting in to the next block. Default 80
+      speedup?: number
+      // define the gas price used for cancel based on the probability of getting in to the next block. Default 95
+      cancel?: number
+    }
+  }
 }
 
 export type CommonPositions =

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.7.0-alpha.1",
+  "version": "2.7.0-alpha.2",
   "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",

packages/core/src/constants.ts

@@ -15,7 +15,13 @@ export const APP_INITIAL_STATE: AppState = {
   notify: {
     enabled: true,
     transactionHandler: () => {},
-    position: 'topRight'
+    position: 'topRight',
+    replacement: {
+      gasPriceProbability: {
+        speedup: 80,
+        cancel: 95
+      }
+    }
   },
   notifications: [],
   locale: '',

packages/core/src/i18n/en.json

@@ -91,14 +91,16 @@
       "txCancel": "Your transaction is being canceled",
       "txFailed": "Your transaction has failed",
       "txConfirmed": "Your transaction has succeeded",
-      "txError": "Oops something went wrong, please try again"
+      "txError": "Oops something went wrong, please try again",
+      "txReplaceError": "There was an error replacing your transaction, please try again"
     },
     "watched": {
       "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}",
       "txSpeedUp": "Transaction for {formattedValue} {asset} {preposition} {counterpartyShortened} has been sped up",
       "txCancel": "Transaction for {formattedValue} {asset} {preposition} {counterpartyShortened} has been canceled",
       "txConfirmed": "Your account successfully {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}",
-      "txFailed": "Your account failed to {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}"
+      "txFailed": "Your account failed to {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}",
+      "txStuck": "Your transaction is stuck due to a nonce gap"
     },
     "time": {
       "minutes": "min",

packages/core/src/index.ts

@@ -311,6 +311,7 @@ function mountApp() {
           --border-radius-2: 20px;  
           --border-radius-3: 16px;  
           --border-radius-4: 12px;  
+          --border-radius-5: 8px;  
 
           /* SHADOWS */
           --shadow-0: none;

packages/core/src/notify.ts

@@ -14,6 +14,7 @@ import { validateTransactionHandlerReturn } from './validation'
 import { state } from './store'
 import { addNotification } from './store/actions'
 import updateBalances from './update-balances'
+import { updateTransaction } from './streams'
 
 export function handleTransactionUpdates(
   transaction: EthereumTransactionData
@@ -32,6 +33,7 @@ export function handleTransactionUpdates(
   const notification = transactionEventToNotification(transaction, customized)
 
   addNotification(notification)
+  updateTransaction(transaction)
 }
 
 export function transactionEventToNotification(
@@ -164,4 +166,3 @@ export function typeToDismissTimeout(type: string): number {
       return 0
   }
 }
-

packages/core/src/replacement.ts

@@ -0,0 +1,82 @@
+import type { EthereumTransactionData, Network } from 'bnc-sdk'
+import { BigNumber } from 'ethers'
+import { configuration } from './configuration'
+import { state } from './store'
+import type { WalletState } from './types'
+import { gweiToWeiHex, networkToChainId, toHexString } from './utils'
+
+const ACTIONABLE_EVENT_CODES: string[] = ['txPool']
+const VALID_GAS_NETWORKS: Network[] = ['main', 'matic-main']
+
+const WALLETS_SUPPORT_REPLACEMENT: WalletState['label'][] = [
+  'Ledger',
+  'Trezor',
+  'Keystone',
+  'Keepkey'
+]
+
+export const actionableEventCode = (eventCode: string): boolean =>
+  ACTIONABLE_EVENT_CODES.includes(eventCode)
+
+export const validGasNetwork = (network: Network): boolean =>
+  VALID_GAS_NETWORKS.includes(network)
+
+export const walletSupportsReplacement = (wallet: WalletState): boolean =>
+  wallet && WALLETS_SUPPORT_REPLACEMENT.includes(wallet.label)
+
+export async function replaceTransaction({
+  type,
+  wallet,
+  transaction
+}: {
+  type: 'speedup' | 'cancel'
+  wallet: WalletState
+  transaction: EthereumTransactionData
+}): Promise<unknown> {
+  const { from, input, value, to, nonce, gas: gasLimit, network } = transaction
+
+  const chainId = networkToChainId[network]
+
+  const { gasPriceProbability } = state.get().notify.replacement
+  const { gas, apiKey } = configuration
+
+  // get gas price
+  const [gasResult] = await gas.get({
+    chains: [networkToChainId[network]],
+    endpoint: 'blockPrices',
+    apiKey
+  })
+
+  const { maxFeePerGas, maxPriorityFeePerGas } =
+    gasResult.blockPrices[0].estimatedPrices.find(
+      ({ confidence }) =>
+        confidence ===
+        (type === 'speedup'
+          ? gasPriceProbability.speedup
+          : gasPriceProbability.cancel)
+    )
+
+  const maxFeePerGasWeiHex = gweiToWeiHex(maxFeePerGas)
+  const maxPriorityFeePerGasWeiHex = gweiToWeiHex(maxPriorityFeePerGas)
+
+  // Some wallets do not like empty '0x' val
+  const dataObj = input === '0x' ? {} : { data: input }
+
+  return wallet.provider.request({
+    method: 'eth_sendTransaction',
+    params: [
+      {
+        type: '0x2',
+        from,
+        to: type === 'cancel' ? from : to,
+        chainId: parseInt(chainId),
+        value: `${BigNumber.from(value).toHexString()}`,
+        nonce: toHexString(nonce),
+        gasLimit: toHexString(gasLimit),
+        maxFeePerGas: maxFeePerGasWeiHex,
+        maxPriorityFeePerGas: maxPriorityFeePerGasWeiHex,
+        ...dataObj
+      }
+    ]
+  })
+}

packages/core/src/streams.ts

@@ -13,6 +13,7 @@ import { resetStore } from './store/actions'
 import { state } from './store'
 
 import type { WalletState, ConnectOptions } from './types'
+import type { EthereumTransactionData } from 'bnc-sdk'
 
 export const reset$ = new Subject<void>()
 export const disconnectWallet$ = new Subject<WalletState['label']>()
@@ -41,6 +42,30 @@ reset$.pipe(withLatestFrom(wallets$), pluck('1')).subscribe(wallets => {
   resetStore()
 })
 
+// keep transactions for all notifications for replacement actions
+export const transactions$ = new BehaviorSubject<EthereumTransactionData[]>([])
+
+export function updateTransaction(tx: EthereumTransactionData): void {
+  const currentTransactions = transactions$.getValue()
+
+  const txIndex = currentTransactions.findIndex(({ hash }) => hash === tx.hash)
+
+  if (txIndex !== -1) {
+    const updatedTransactions = currentTransactions.map((val, i) =>
+      i === txIndex ? tx : val
+    )
+
+    transactions$.next(updatedTransactions)
+  } else {
+    transactions$.next([...currentTransactions, tx])
+  }
+}
+
+export function removeTransaction(hash: string): void {
+  const currentTransactions = transactions$.getValue()
+  transactions$.next(currentTransactions.filter(tx => tx.hash !== hash))
+}
+
 export const onMount$ = defer(() => {
   const subject = new Subject<void>()
   onMount(() => {

packages/core/src/types.ts

@@ -185,6 +185,12 @@ export type Notify = {
    * and notifications are enabled (enabled by default with API key)
    */
   position?: NotificationPosition
+  replacement?: {
+    gasPriceProbability?: {
+      speedup?: number
+      cancel?: number
+    }
+  }
 }
 
 export type NotifyOptions = {

packages/core/src/utils.ts

@@ -93,15 +93,19 @@ export async function copyWalletAddress(text: string): Promise<void> {
   }
 }
 
-export const toHexString = (val: number | string): string => typeof val === 'number' ? `0x${val.toString(16)}` : val
+export const toHexString = (val: number | string): string =>
+  typeof val === 'number' ? `0x${val.toString(16)}` : val
 
-export function chainIdToHex(chains : Chain[] | ChainWithDecimalId[] ): 
-Chain[] {
-  return chains.map(({ id, ...rest }) => { 
+export function chainIdToHex(chains: Chain[] | ChainWithDecimalId[]): Chain[] {
+  return chains.map(({ id, ...rest }) => {
     const hexId = toHexString(id)
     return { id: hexId, ...rest }
-  })  
-} 
+  })
+}
+
+export function gweiToWeiHex(gwei: number): string {
+  return `0x${(gwei * 1e9).toString(16)}`
+}
 
 export const chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',