diff --git a/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md b/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md index caf5647f1..d1adcf5d3 100644 --- a/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...5]transaction-preview/+page.md @@ -1,400 +1,9 @@ --- -title: Transaction Preview +title: Transaction Preview - Deprecated --- - - # {$frontmatter.title} :::admonition type=warning -_Transaction Preview support is sunset on July 1st 2024 and will no longer work after that date_ +_Transaction Preview support has ended and is not longer supported within Web3-Onboard. Please remove Transaction Preview to avoid console errors and unexpected behavior._ ::: - -A modular UI for previewing a single or set of unsigned Ethereum transactions. - -Transaction Preview Flow image - -### Try Transaction Preview - -Preview Vitalik swapping 100 UNI tokens for ETH using Transaction Preview - - -Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api) - -### Install - - - - -```sh copy -yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview -``` - - - - -```sh copy -npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview -``` - - - - -### Usage with Web3-Onboard Core package - -Transaction Preview Flow gif - -To use the Transaction Preview package with Web3 Onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below. - -```typescript copy -import Onboard from '@web3-onboard/core' -import injectedModule from '@web3-onboard/injected-wallets' -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const injected = injectedModule() -const transactionPreview = transactionPreviewModule( - // Optional initialization object - // { - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options - // } -) - -const onboard = Onboard({ - transactionPreview, - apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx' - wallets: [injected], - chains: [ - { - id: '0x1', - token: 'ETH', - label: 'Ethereum', - rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' - } - ] - // ... other Onboard options -}) - -// Transaction code here using Ether.js or Web3.js or custom -// The transaction will automatically be picked up and simulated with a UI displaying in the upper right corner -``` - -### Standalone Usage - -To use the Transaction Preview package without Web3 Onboard all a developer needs to do is: - -- Execute the entry function from the `@web3-onboard/transaction-preview` package and optional params -- Run the returned `init` function with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas), an initialized instance of their [Blocknative SDK](https://www.npmjs.com/package/bnc-sdk), and a containerElement string with the html ID of the target element to append the visualization to -- Finally pass a transaction meant for a wallet provider (created using libraries like Ethers or Web3) - -With the above steps a UI will be rendered with the balance changes and gas used. - -```typescript copy -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const {init, previewTransaction} = transactionPreviewModule({ - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options -}) -await init({ -/** - * Blocknative API key (https://explorer.blocknative.com/account) - */ -apiKey: string -/** - * Your Blocknative SDK instance - * */ -sdk: SDK -/** - * Optional dom query string to mount UI to - * */ -containerElement: string}) - -// Transaction code here using Ether.js or Web3.js or construct your own transactions -const simulate = async provider => { - // if using ethers v6 this is: - // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') - const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') - - const signer = ethersProvider.getSigner() - const addressFrom = '0xcxxxxxx11111999991111' - - // Uniswap V2 - const CONTRACT_ADDRESS = '0x7a250d5630b4cf539739df2c5dacb4c659f2488d' - const erc20_interface = [ - 'function approve(address _spender, uint256 _value) public returns (bool success)', - 'function transferFrom(address sender, address recipient, uint256 amount) external returns (bool)', - 'function balanceOf(address owner) view returns (uint256)' - ] - - const uniswapV2router_interface = [ - 'function swapExactTokensForETH(uint amountIn, uint amountOutMin, address[] calldata path, address to, uint deadline) external returns (uint[] memory amounts)' - ] - - const weth = '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2' - const oneInch = '0x111111111117dc0aa78b770fa6a738034120c302' - let swapTxData - let approveTxData - const swapContract = new ethers.Contract( - CONTRACT_ADDRESS, - uniswapV2router_interface - ) - const erc20_contract = new ethers.Contract(oneInch, erc20_interface) - const oneEther = ethers.BigNumber.from('9000000000000000000') - approveTxData = await erc20_contract.populateTransaction.approve( - CONTRACT_ADDRESS, - oneEther - ) - - const amountOutMin = 0 - const amountOutMinHex = ethers.BigNumber.from(amountOutMin).toHexString() - - const path = [oneInch, weth] - const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time - - const inputAmountHex = oneEther.toHexString() - - swapTxData = await swapContract.populateTransaction.swapExactTokensForETH( - inputAmountHex, - amountOutMinHex, - path, - addressFrom, - deadline - ) - const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D' - - const popApproveTransaction = await signer.populateTransaction(approveTxData) - const popTransaction = await signer.populateTransaction(swapTxData) - const transactions = [ - { ...popApprovedTransaction, value: 0 }, - { - ...popTransaction, - from: addressFrom, - to: uniswapV2Router, - value: 0 - } - ] - await previewTransaction(transactions) -} - - return await previewTransaction(transactions) -} - -const simData = simulate(ethereumProvider) -console.log(simData) -``` - -### Options & Types - -```typescript -export type TransactionPreviewModule = (options: TransactionPreviewOptions) => TransactionPreviewAPI - -export type FullPreviewOptions = TransactionPreviewOptions & TransactionPreviewInitOptions - -export type TransactionPreviewAPI = { - /** - * This Method accepts a standard EIP1193 provider - * (such as an injected wallet from window.ethereum) - * and it will be patched to allow for transaction previewing - */ - patchProvider: (provider: PatchedEIP1193Provider) => PatchedEIP1193Provider - - /** - * This Method accepts: - * apiKey: string - Blocknative API key (https://explorer.blocknative.com/) - * sdk: instance of an initialized bnc-sdk (www.npmjs.com/package/bnc-sdk) - * containerElement: string of an html id selector (e.g. "#my-html-el") - */ - init: (initializationOptions: TransactionPreviewInitOptions) => void - - /** - * This method accepts a transaction meant for a wallet provider - * (created using libraries like Ethers or Web3), - * simulates the transaction and generates a corresponding UI and - * return a response from the Blocknative Transaction Preview API. - * Note: the package will need to initialized with the `init` - * function prior to usage - */ - previewTransaction: (transaction: TransactionForSim[]) => Promise -} - -export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean } - -export interface ProviderReq { - method: string - params?: Array -} - -export type RequestOptions = Pick - -export type TransactionPreviewInitOptions = { - /** - * Blocknative API key (https://explorer.blocknative.com/account) - */ - apiKey: string - /** - * Your Blocknative SDK instance (https://www.npmjs.com/package/bnc-sdk) - * */ - sdk: SDK - /** - * Optional dom query string to mount UI to - * */ - containerElement: string -} - -export type TransactionPreviewOptions = { - /** - * Optional requirement for user to accept transaction balance changes - * prior to sending the transaction to the wallet - * Defaults to true - * */ - requireTransactionApproval?: boolean - /** - * An optional internationalization object that defines the display - * text for different locales. Can also be used to override the default text. - * To override the default text, pass in a object for the en locale - */ - i18n?: i18nOptions -} - -export type Locale = string -export type i18nOptions = Record -export type i18n = typeof en - -export type DeviceNotBrowser = { - type: null - os: null - browser: null -} - -export type TransactionForSim = SimulationTransaction & { - data?: string -} - -export interface SimulationTransaction { - from: string - to: string - value: number - gas: number - input: string - // Either Type 1 Gas (gasPrice) or Type 2 Gas (maxPriorityFeePerGas & maxFeePerGas) - // must be included in the payload - gasPrice?: number - maxPriorityFeePerGas?: number - maxFeePerGas?: number -} - -export type MultiSimOutput = { - id?: string - contractCall: ContractCall[] - error?: any - gasUsed: number[] - internalTransactions: InternalTransaction[][] - netBalanceChanges: NetBalanceChange[][] - network: Network - simDetails: SimDetails - serverVersion: string - system: System - status: Status - simulatedBlockNumber: number - transactions: InternalTransaction[] -} - -export interface ContractCall { - contractType?: string - contractAddress?: string - contractAlias?: string - methodName: string - params: Record - contractName?: string - contractDecimals?: number - decimalValue?: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall - error?: string - errorReason?: string -} - -export interface NetBalanceChange { - address: string - balanceChanges: BalanceChange[] -} - -export interface BalanceChange { - delta: string - asset: Asset - breakdown: BreakDown[] -} - -export interface Asset { - type: string - symbol: string - contractAddress: string -} - -export interface BreakDown { - counterparty: string - amount: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall -} - -export type System = 'bitcoin' | 'ethereum' -export type Network = - | 'main' - | 'testnet' - | 'sepolia' - | 'xdai' - | 'bsc-main' - | 'matic-main' - | 'fantom-main' - | 'matic-mumbai' - | 'local' - -export type Status = - | 'pending' - | 'confirmed' - | 'speedup' - | 'cancel' - | 'failed' - | 'dropped' - | 'simulated' - -export interface SimDetails { - blockNumber: number - e2eMs: number - performanceProfile: any -} -``` - -## Build Environments - -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/packages/core/package.json b/packages/core/package.json index f7634651c..f7768a00c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -72,7 +72,6 @@ "@typescript-eslint/parser": "^4.31.1", "@web3-onboard/gas": "^2.1.5", "@web3-onboard/wagmi": "2.0.0", - "@web3-onboard/transaction-preview": "^2.0.5", "@web3-onboard/unstoppable-resolution": "^2.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 94c86db52..d4a55d88e 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -8,7 +8,6 @@ export let configuration: Configuration = { initialWalletInit: [], gas: undefined, containerElements: { accountCenter: undefined, connectModal: undefined }, - transactionPreview: undefined, unstoppableResolution: undefined, wagmi: undefined } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 3d785ffb6..21714d289 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -37,7 +37,6 @@ import { updateChain, updateWallet } from './store/actions.js' -import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview' import { getBlocknativeSdk } from './services.js' import type { WagmiModuleAPI } from '@web3-onboard/wagmi' import { wagmiProviderMethods } from './provider' @@ -241,7 +240,6 @@ function init(options: InitOptions): OnboardAPI { apiKey, initialWalletInit: wallets, gas, - transactionPreview, unstoppableResolution, wagmi: wagmiApi }) @@ -249,24 +247,9 @@ function init(options: InitOptions): OnboardAPI { appMetadata && updateAppMetadata(appMetadata) if (apiKey && transactionPreview) { - console.warn( - 'Transaction Preview support is going to be sunset on July 1st 2024 and will no longer work after that date' + console.error( + 'Transaction Preview support has been removed and is no longer supported within Web3-Onboard' ) - const getBnSDK = async () => { - const sdk = await getBlocknativeSdk() - if (!sdk) return - transactionPreview.init({ - containerElement: '#w3o-transaction-preview-container', - sdk, - apiKey - }) - wallets$.subscribe(wallets => { - wallets.forEach(({ provider }) => { - transactionPreview.patchProvider(provider as PatchedEIP1193Provider) - }) - }) - } - getBnSDK() } theme && updateTheme(theme) diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 2fbc11b8f..9f6183a80 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -15,7 +15,6 @@ import type { import type gas from '@web3-onboard/gas' import type unstoppableResolution from '@web3-onboard/unstoppable-resolution' -import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview' import type en from './i18n/en.json' import type { EthereumTransactionData, Network } from 'bnc-sdk' @@ -71,9 +70,12 @@ export interface InitOptions { */ containerElements?: Partial /** - * Transaction Preview module + * @deprecated Transaction Preview support has ended and Transaction Preview + * is no longer supported as part of Web3-Onboard. + * Please remove from your onboard config to avoid + * console errors and un-expected behavior */ - transactionPreview?: TransactionPreviewAPI + transactionPreview?: unknown /** * Custom or predefined theme for Web3Onboard * BuiltInThemes: ['default', 'dark', 'light', 'system'] @@ -204,7 +206,7 @@ export type Configuration = { gas?: typeof gas wagmi?: WagmiModuleAPI containerElements?: ContainerElements - transactionPreview?: TransactionPreviewAPI + transactionPreview?: unknown unstoppableResolution?: typeof unstoppableResolution } diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index da3882516..904a06620 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -249,11 +249,10 @@ const initOptions = Joi.object({ wagmi: Joi.function(), connect: connectModalOptions, containerElements: containerElements, - transactionPreview: Joi.object({ - patchProvider: Joi.function().required(), - init: Joi.function().required(), - previewTransaction: Joi.function() - }), + // transactionPreview is deprecated but is still allowed to + // avoid breaking dapps a console error is shown although + // transactionPreview functionality has been removed + transactionPreview: Joi.any(), theme: theme, disableFontDownload: Joi.boolean(), unstoppableResolution: Joi.function() diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index ae1c81818..fa53a11aa 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -407,16 +407,6 @@ {/if} -{#if !$accountCenter$.enabled && !$notify$.enabled} -
-{/if} - {#if displayAccountCenterNotifySameContainer}
- {/if}
{#await accountCenterComponent then AccountCenter} {#if AccountCenter} @@ -450,9 +437,6 @@ {/if} {/await}
- {#if $accountCenter$.position.includes('top')} -
- {/if} {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile} {#await notifyComponent then Notify} {#if Notify} @@ -478,9 +462,6 @@ ? 'padding-top:0;' : ''} " > - {#if $accountCenter$.position.includes('bottom')} -
- {/if}
{#if $accountCenter$.enabled && $wallets$.length} {#await accountCenterComponent then AccountCenter} @@ -490,9 +471,6 @@ {/await} {/if}
- {#if $accountCenter$.position.includes('top')} -
- {/if}
{/if} {#if displayNotifySeparate} @@ -506,9 +484,6 @@ ? 'padding-top:0;' : ''} " > - {#if $notify$.position.includes('top')} -
- {/if} {#await notifyComponent then Notify} {#if Notify} {/if} {/await} - {#if $notify$.position.includes('bottom')} -
- {/if}
{/if} diff --git a/packages/demo/package.json b/packages/demo/package.json index abf2613ae..211c1c454 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -58,7 +58,7 @@ "@web3-onboard/sequence": "^2.1.1", "@web3-onboard/taho": "^2.1.1", "@web3-onboard/torus": "^2.3.1", - "@web3-onboard/transaction-preview": "^2.1.1", + "@web3-onboard/transaction-preview": "^2.1.2-alpha.1", "@web3-onboard/trezor": "^2.4.4", "@web3-onboard/trust": "^2.1.1", "@web3-onboard/uauth": "^2.2.1", diff --git a/packages/transaction-preview/README.md b/packages/transaction-preview/README.md index ef73578cd..f3a3ee3ff 100644 --- a/packages/transaction-preview/README.md +++ b/packages/transaction-preview/README.md @@ -1,368 +1,3 @@ # @web3-onboard/transaction-preview -## (Deprecated) Transaction Preview support is going to be sunset on July 1st 2024 and will no longer work after that date - -## A modular UI for previewing a single or set of unsigned Ethereum transactions. - -![Transaction Preview Flow](https://github.com/blocknative/web3-onboard/blob/develop/assets/transaction-preview.gif?raw=true 'Transaction Preview Flow') - -#### Give Transaction Preview a test run by previewing Vitalik swapping tokens and find full package documentation [here](https://onboard.blocknative.com/docs/packages/transaction-preview) - -Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api) - -### Install - -**NPM** -`npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview` - -**Yarn** -`yarn add @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/transaction-preview` - -### Usage with Web3-Onboard Core package - -![Transaction Preview Image with Account Center](https://github.com/blocknative/web3-onboard/blob/develop/assets/transaction-preview.png?raw=true 'Transaction Preview Image with Account Center') - -To use the Transaction Preview package with web3-onboard all a developer needs to do is initialize web3-onboard with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas) and pass in the module as shown below. - -```typescript -import Onboard from '@web3-onboard/core' -import injectedModule from '@web3-onboard/injected-wallets' -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const injected = injectedModule() -const transactionPreview = transactionPreviewModule({ - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options -}) - -const onboard = Onboard({ - transactionPreview, - apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx' - wallets: [injected], - chains: [ - { - id: '0x1', - token: 'ETH', - label: 'Ethereum', - rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' - } - ] - // ... other Onboard options -}) - -// Transaction code here using Ether.js or Web3.js or custom -// The transaction will automatically be picked up and simulated with a UI displaying in the upper right corner -``` - -### Standalone Usage - -To use the Transaction Preview package without web3-onboard all a developer needs to do is: -- Execute the entry function from the `@web3-onboard/transaction-preview` package and optional params -- Run the returned `init` function with their [Blocknative API key](https://onboard.blocknative.com/docs/overview/introduction#optional-use-an-api-key-to-fetch-real-time-transaction-data-balances-gas), an initialized instance of their [Blocknative SDK](https://www.npmjs.com/package/bnc-sdk) and a containerElement string with the html ID of the target element to append the visualization to -- Finally pass a transaction meant for a wallet provider (created using libraries like Ethers or Web3) - -With the above steps a UI will be rendered with the balance changes and gas used. - -```typescript -import transactionPreviewModule from '@web3-onboard/transaction-preview' - -const {init, previewTransaction} = transactionPreviewModule({ - // Optional: Require balance change approval prior to sending transaction to wallet - // Defaults to true - // requireTransactionApproval?: false - - // i18n?: i18nOptions - Internationalization options -}) -await init({ -/** - * Blocknative API key (https://explorer.blocknative.com/account) - */ -apiKey: string -/** - * Your Blocknative SDK instance - * */ -sdk: SDK -/** - * Optional dom query string to mount UI to - * */ -containerElement: string}) - -// Transaction code here using Ether.js or Web3.js or construct your own transactions -const simulate = async provider => { - // if using ethers v6 this is: - // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any') - const ethersProvider = new ethers.providers.Web3Provider(provider, 'any') - - const signer = ethersProvider.getSigner() - const addressFrom = '0xcxxxxxx11111999991111' - - // Uniswap V2 - const CONTRACT_ADDRESS = '0x7a250d5630b4cf539739df2c5dacb4c659f2488d' - const erc20_interface = [ - 'function approve(address _spender, uint256 _value) public returns (bool success)', - 'function transferFrom(address sender, address recipient, uint256 amount) external returns (bool)', - 'function balanceOf(address owner) view returns (uint256)' - ] - - const uniswapV2router_interface = [ - 'function swapExactTokensForETH(uint amountIn, uint amountOutMin, address[] calldata path, address to, uint deadline) external returns (uint[] memory amounts)' - ] - - const weth = '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2' - const oneInch = '0x111111111117dc0aa78b770fa6a738034120c302' - let swapTxData - let approveTxData - const swapContract = new ethers.Contract( - CONTRACT_ADDRESS, - uniswapV2router_interface - ) - const erc20_contract = new ethers.Contract(oneInch, erc20_interface) - const oneEther = ethers.BigNumber.from('9000000000000000000') - approveTxData = await erc20_contract.populateTransaction.approve( - CONTRACT_ADDRESS, - oneEther - ) - - const amountOutMin = 0 - const amountOutMinHex = ethers.BigNumber.from(amountOutMin).toHexString() - - const path = [oneInch, weth] - const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time - - const inputAmountHex = oneEther.toHexString() - - swapTxData = await swapContract.populateTransaction.swapExactTokensForETH( - inputAmountHex, - amountOutMinHex, - path, - addressFrom, - deadline - ) - const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D' - - const popApproveTransaction = await signer.populateTransaction(approveTxData) - const popTransaction = await signer.populateTransaction(swapTxData) - const transactions = [ - { ...popApprovedTransaction, value: 0 }, - { - ...popTransaction, - from: addressFrom, - to: uniswapV2Router, - value: 0 - } - ] - return await previewTransaction(transactions) -} - -const simData = simulate(ethereumProvider) -console.log(simData) -``` - -### Options & Types - -```typescript -export type TransactionPreviewModule = ( - options: TransactionPreviewOptions -) => TransactionPreviewAPI - -export type FullPreviewOptions = TransactionPreviewOptions & - TransactionPreviewInitOptions - -export type TransactionPreviewAPI = { - /** - * This Method accepts a standard EIP1193 provider - * (such as an injected wallet from window.ethereum) - * and it will be patched to allow for transaction previewing - */ - patchProvider: (provider: PatchedEIP1193Provider) => PatchedEIP1193Provider - - /** - * This Method accepts: - * apiKey: string - Blocknative API key (https://explorer.blocknative.com/) - * sdk: instance of an initialized bnc-sdk (www.npmjs.com/package/bnc-sdk) - * containerElement: string of an html id selector (e.g. "#my-html-el") - */ - init: (initializationOptions: TransactionPreviewInitOptions) => void - - /** - * This method accepts a transaction meant for a wallet provider - * (created using libraries like Ethers or Web3), - * simulates the transaction and generates a corresponding UI and - * return a response from the Blocknative Transaction Preview API. - * Note: the package will need to initialized with the `init` - * function prior to usage - */ - previewTransaction: ( - transaction: TransactionForSim[] - ) => Promise -} - -export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean } - -export interface ProviderReq { - method: string - params?: Array -} - -export type RequestOptions = Pick - -export type TransactionPreviewInitOptions = { - /** - * Blocknative API key (https://explorer.blocknative.com/account) - */ - apiKey: string - /** - * Your Blocknative SDK instance (https://www.npmjs.com/package/bnc-sdk) - * */ - sdk: SDK - /** - * Optional dom query string to mount UI to - * */ - containerElement: string -} - -export type TransactionPreviewOptions = { - /** - * Optional requirement for user to accept transaction balance changes - * prior to sending the transaction to the wallet - * Defaults to true - * */ - requireTransactionApproval?: boolean - /** - * An optional internationalization object that defines the display - * text for different locales. Can also be used to override the default text. - * To override the default text, pass in a object for the en locale - */ - i18n?: i18nOptions -} - -export type Locale = string -export type i18nOptions = Record -export type i18n = typeof en - -export type DeviceNotBrowser = { - type: null - os: null - browser: null -} - -export type TransactionForSim = SimulationTransaction & { - data?: string -} - -export interface SimulationTransaction { - from: string - to: string - value: number - gas: number - input: string - // Either Type 1 Gas (gasPrice) or Type 2 Gas (maxPriorityFeePerGas & maxFeePerGas) - // must be included in the payload - gasPrice?: number - maxPriorityFeePerGas?: number - maxFeePerGas?: number -} - -export type MultiSimOutput = { - id?: string - contractCall: ContractCall[] - error?: any - gasUsed: number[] - internalTransactions: InternalTransaction[][] - netBalanceChanges: NetBalanceChange[][] - network: Network - simDetails: SimDetails - serverVersion: string - system: System - status: Status - simulatedBlockNumber: number - transactions: InternalTransaction[] -} - -export interface ContractCall { - contractType?: string - contractAddress?: string - contractAlias?: string - methodName: string - params: Record - contractName?: string - contractDecimals?: number - decimalValue?: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall - error?: string - errorReason?: string -} - -export interface NetBalanceChange { - address: string - balanceChanges: BalanceChange[] -} - -export interface BalanceChange { - delta: string - asset: Asset - breakdown: BreakDown[] -} - -export interface Asset { - type: string - symbol: string - contractAddress: string -} - -export interface BreakDown { - counterparty: string - amount: string -} - -export interface InternalTransaction { - type: string - from: string - to: string - input: string - gas: number - gasUsed: number - value: string - contractCall: ContractCall -} - -export type System = 'bitcoin' | 'ethereum' -export type Network = - | 'main' - | 'testnet' - | 'sepolia' - | 'xdai' - | 'bsc-main' - | 'matic-main' - | 'fantom-main' - | 'matic-mumbai' - | 'local' - -export type Status = - | 'pending' - | 'confirmed' - | 'speedup' - | 'cancel' - | 'failed' - | 'dropped' - | 'simulated' - -export interface SimDetails { - blockNumber: number - e2eMs: number - performanceProfile: any -} -``` +## (Deprecated) Transaction Preview support has ended and is not longer supported within Web3-Onboard. Please remove Transaction Preview to avoid console errors and unexpected behavior. diff --git a/packages/transaction-preview/package.json b/packages/transaction-preview/package.json index aae27f489..3a6b54e6b 100644 --- a/packages/transaction-preview/package.json +++ b/packages/transaction-preview/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/transaction-preview", - "version": "2.1.1", + "version": "2.1.2-alpha.1", "description": "In app preview of Ethereum transactions", "keywords": [ "Ethereum",