|
| 1 | +<script> |
| 2 | + import { onMount } from 'svelte' |
| 3 | + import { ethers } from 'ethers' |
| 4 | +
|
| 5 | + let transactionPreview |
| 6 | + let blocknativeSdk |
| 7 | +
|
| 8 | + const buildTransaction = async () => { |
| 9 | + const addressFrom = '0xab5801a7d398351b8be11c439e05c5b3259aec9b' |
| 10 | +
|
| 11 | + const CONTRACT_ADDRESS = '0x7a250d5630b4cf539739df2c5dacb4c659f2488d' |
| 12 | + const erc20_interface = [ |
| 13 | + 'function approve(address _spender, uint256 _value) public returns (bool success)', |
| 14 | + 'function transferFrom(address sender, address recipient, uint256 amount) external returns (bool)', |
| 15 | + 'function balanceOf(address owner) view returns (uint256)' |
| 16 | + ] |
| 17 | +
|
| 18 | + const uniswapV2router_interface = [ |
| 19 | + 'function swapExactTokensForETH(uint amountIn, uint amountOutMin, address[] calldata path, address to, uint deadline) external returns (uint[] memory amounts)' |
| 20 | + ] |
| 21 | +
|
| 22 | + const weth = '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2' |
| 23 | + const uni = '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984' |
| 24 | + let swapTxData |
| 25 | + let approveTxData |
| 26 | + const createTransaction = async () => { |
| 27 | + const swapContract = new ethers.Contract(CONTRACT_ADDRESS, uniswapV2router_interface) |
| 28 | + const erc20_contract = new ethers.Contract(weth, erc20_interface) |
| 29 | + const oneHundredUni = ethers.BigNumber.from('100000000000000000000') |
| 30 | + approveTxData = await erc20_contract.populateTransaction.approve( |
| 31 | + CONTRACT_ADDRESS, |
| 32 | + oneHundredUni |
| 33 | + ) |
| 34 | +
|
| 35 | + const amountOutMin = 0 |
| 36 | + const amountOutMinHex = ethers.BigNumber.from(amountOutMin.toString())._hex |
| 37 | +
|
| 38 | + const path = [uni, weth] |
| 39 | + const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time |
| 40 | +
|
| 41 | + const inputAmountHex = oneHundredUni.toHexString() |
| 42 | +
|
| 43 | + swapTxData = await swapContract.populateTransaction.swapExactTokensForETH( |
| 44 | + inputAmountHex, |
| 45 | + amountOutMinHex, |
| 46 | + path, |
| 47 | + addressFrom, |
| 48 | + deadline |
| 49 | + ) |
| 50 | + } |
| 51 | + await createTransaction() |
| 52 | + const account_address = '0xab5801a7d398351b8be11c439e05c5b3259aec9b' |
| 53 | + const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D' |
| 54 | +
|
| 55 | + return [ |
| 56 | + { |
| 57 | + from: account_address, |
| 58 | + to: uni, |
| 59 | + input: approveTxData.data, |
| 60 | + gas: 1000000, |
| 61 | + gasPrice: 48000000000, |
| 62 | + value: 0 |
| 63 | + }, |
| 64 | + { |
| 65 | + from: account_address, |
| 66 | + to: uniswapV2Router, |
| 67 | + input: swapTxData.data, |
| 68 | + gas: 1000000, |
| 69 | + gasPrice: 48000000000, |
| 70 | + value: 0 |
| 71 | + } |
| 72 | + ] |
| 73 | + } |
| 74 | +
|
| 75 | +
|
| 76 | + const handlePreview = async () => { |
| 77 | + await transactionPreview.init({ |
| 78 | + apiKey: '133a026b-c7a0-419c-a00b-66255b3cd487', |
| 79 | + sdk: blocknativeSdk, |
| 80 | + containerElement: '#tp-container' |
| 81 | + }) |
| 82 | +
|
| 83 | + const stubTrans = await buildTransaction() |
| 84 | + await transactionPreview.previewTransaction(stubTrans) |
| 85 | +
|
| 86 | + } |
| 87 | +
|
| 88 | + onMount(async () => { |
| 89 | + const { default: Blocknative } = await import('bnc-sdk') |
| 90 | + const { default: transactionPreviewModule } = await import('@web3-onboard/transaction-preview') |
| 91 | +
|
| 92 | + blocknativeSdk = new Blocknative({ |
| 93 | + dappId: '133a026b-c7a0-419c-a00b-66255b3cd487', |
| 94 | + networkId: 1 |
| 95 | + }) |
| 96 | +
|
| 97 | + transactionPreview = transactionPreviewModule({ |
| 98 | + requireTransactionApproval: true |
| 99 | + }) |
| 100 | + }) |
| 101 | +</script> |
| 102 | + |
| 103 | +<div> |
| 104 | + {#await blocknativeSdk && transactionPreview then Preview} |
| 105 | + {#if Preview} |
| 106 | + <button |
| 107 | + class="rounded-lg bg-gray-inverse hover:bg-gray-hover hover:text-gray-inverse transition-all px-4 h-10 text-base text-gray-current" |
| 108 | + on:click={() => handlePreview()} |
| 109 | + > |
| 110 | + Preview Transaction |
| 111 | + </button> |
| 112 | + |
| 113 | + <div id="tp-container" /> |
| 114 | + {/if} |
| 115 | + {/await} |
| 116 | +</div> |
| 117 | + |
| 118 | +<style> |
| 119 | + #tp-container { |
| 120 | + height: auto; |
| 121 | + width: 316px; |
| 122 | + margin-top: 12px; |
| 123 | + } |
| 124 | +</style> |
0 commit comments