Transaction Preview

        import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected'
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

      

        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)

      

        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<MultiSimOutput>;
};

export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean };

export interface ProviderReq {
	method: string;
	params?: Array<unknown>;
}

export type RequestOptions = Pick<TransactionPreviewInitOptions, 'apiKey'>;

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<Locale, i18n>;
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<string, unknown>;
	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'
	| 'ropsten'
	| 'rinkeby'
	| 'goerli'
	| 'kovan'
	| '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;
}