From 13924428ed3e93e149bdc18adb5317d25cae85a4 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 15 Jul 2024 12:58:09 -0600 Subject: [PATCH 1/5] Update docs for gnosis/safe package for building within vue env (#2257) * Update docs for gnosis/safe package for building within vue env * Add clarity and remoinder for peerDeps --- .../docs/[...3]modules/[...1]core/+page.md | 5 ++++- .../docs/[...3]modules/[...7]vue/+page.md | 3 +++ .../docs/[...4]wallets/[...12]gnosis/+page.md | 18 ++++++++++++++++++ packages/core/README.md | 4 +++- packages/gnosis/README.md | 19 +++++++++++++++++++ packages/gnosis/package.json | 2 +- 6 files changed, 48 insertions(+), 3 deletions(-) diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md index e6ee59706..72ea627bf 100644 --- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md @@ -441,6 +441,7 @@ const sendTransaction = async () => { console.log(result) } ``` + --- #### disableFontDownload @@ -1902,7 +1903,9 @@ export default { '@web3-onboard/gas', '@web3-onboard/sequence', 'js-sha3', - '@ethersproject/bignumber' + '@ethersproject/bignumber', + '@safe-global/safe-apps-sdk', + '@safe-global/safe-apps-provider' ], esbuildOptions: { // Node.js global to browser globalThis diff --git a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md index df335698a..50c9b85d8 100644 --- a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md +++ b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md @@ -503,6 +503,9 @@ export default { commonjsOptions: { transformMixedEsModules: true } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] } } ``` diff --git a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md index 81d9c083f..e8c124ba4 100644 --- a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md @@ -80,3 +80,21 @@ Note: With the `safeTxGas` you will see additional value on the `gasLimit` displ ## Build Environments For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) + +## Vue Build Configuration + +If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`. + +```typescript +export default defineConfig({ + plugins: [vue(), vueJsx(), VueDevTools()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] + } +}) +``` \ No newline at end of file diff --git a/packages/core/README.md b/packages/core/README.md index ebaaa4b5d..d6a0b299a 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1670,7 +1670,9 @@ const config: UserConfig = { '@web3-onboard/gas', '@web3-onboard/sequence', 'js-sha3', - '@ethersproject/bignumber' + '@ethersproject/bignumber', + '@safe-global/safe-apps-sdk', + '@safe-global/safe-apps-provider' ], esbuildOptions: { // Node.js global to browser globalThis diff --git a/packages/gnosis/README.md b/packages/gnosis/README.md index 435b7768f..ebd5e430b 100644 --- a/packages/gnosis/README.md +++ b/packages/gnosis/README.md @@ -57,3 +57,22 @@ let trans = await wallet.instance.txs.send({txs:[tx], params}) ``` Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation. + + +## Vue Build Configuration + +If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`. + +```typescript +export default defineConfig({ + plugins: [vue(), vueJsx(), VueDevTools()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + }, + optimizeDeps: { + include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider'] + } +}) +``` \ No newline at end of file diff --git a/packages/gnosis/package.json b/packages/gnosis/package.json index 9fd40516e..2dd5ff6bb 100644 --- a/packages/gnosis/package.json +++ b/packages/gnosis/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/gnosis", - "version": "2.3.1", + "version": "2.3.2-alpha.1", "description": "Safe 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", From 1e9413f487c18da4937ecbae8ed066234f1fd410 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 15 Jul 2024 13:32:59 -0600 Subject: [PATCH 2/5] Update - Gnosis docs : note about browser extension for handling CORS (#2258) * Update docs for gnosis/safe package for building within vue env * Add clarity and remoinder for peerDeps * Add cors blocking extension notes --- docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md | 7 ++++++- packages/gnosis/README.md | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md index e8c124ba4..e4612b4d8 100644 --- a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md +++ b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md @@ -79,7 +79,12 @@ Note: With the `safeTxGas` you will see additional value on the `gasLimit` displ ## Build Environments -For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments). + + +## Local testing within the Safe app + +Ensure the application is building and working properly within the browser and then add or enable your cors blocker extension or script of choice. An example is the `Allow CORS` browser extension. ## Vue Build Configuration diff --git a/packages/gnosis/README.md b/packages/gnosis/README.md index ebd5e430b..3e4a79c16 100644 --- a/packages/gnosis/README.md +++ b/packages/gnosis/README.md @@ -59,6 +59,10 @@ let trans = await wallet.instance.txs.send({txs:[tx], params}) Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation. +## Local testing within the Safe app + +Ensure the application is building and working properly within the browser and then add or enable your cors blocker extension or script of choice. An example is the `Allow CORS` browser extension. + ## Vue Build Configuration If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`. From 3f6c5df5c972413710c7c780ae465c0139f3babf Mon Sep 17 00:00:00 2001 From: Omri Dan <61094771+omridan159@users.noreply.github.com> Date: Mon, 5 Aug 2024 20:04:49 +0400 Subject: [PATCH 3/5] feat: update '@metamask/sdk' package to version '0.27.0' (#2248) * feat: update '@metamask/sdk' package to version '0.26.3' * feat: update '@metamask/sdk' package to version '0.26.4' * feat: update metamask-sdk package to version 0.26.5 * feat: update metamask-sdk package to version 0.27.0 --- packages/demo/package.json | 2 +- packages/metamask/package.json | 4 +- yarn.lock | 103 ++++++++++++++++++++------------- 3 files changed, 65 insertions(+), 44 deletions(-) diff --git a/packages/demo/package.json b/packages/demo/package.json index cc564fd3a..abf2613ae 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -48,7 +48,7 @@ "@web3-onboard/keystone": "^2.3.8", "@web3-onboard/ledger": "^2.7.1", "@web3-onboard/magic": "^2.2.1", - "@web3-onboard/metamask": "^2.1.2", + "@web3-onboard/metamask": "^2.1.3-alpha.1", "@web3-onboard/mew-wallet": "^2.1.1", "@web3-onboard/okx": "2.0.0", "@web3-onboard/particle-network": "^2.1.1", diff --git a/packages/metamask/package.json b/packages/metamask/package.json index 6a87e1f72..d2a7d314f 100644 --- a/packages/metamask/package.json +++ b/packages/metamask/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/metamask", - "version": "2.1.2", + "version": "2.1.3-alpha.1", "description": "MetaMask 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", @@ -60,7 +60,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "@metamask/sdk": "^0.26.1", + "@metamask/sdk": "^0.27.0", "@web3-onboard/common": "^2.4.1" }, "engines": { diff --git a/yarn.lock b/yarn.lock index 970b45441..bea12fd87 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2103,12 +2103,21 @@ "@metamask/safe-event-emitter" "^3.0.0" "@metamask/utils" "^8.3.0" -"@metamask/json-rpc-middleware-stream@^6.0.2": - version "6.0.2" - resolved "https://registry.yarnpkg.com/@metamask/json-rpc-middleware-stream/-/json-rpc-middleware-stream-6.0.2.tgz#75852ce481f8f9f091edbfc04ffdf964f8f3cabd" - integrity sha512-jtyx3PRfc1kqoLpYveIVQNwsxYKefc64/LCl9h9Da1m3nUKEvypbYuXSIwi237qvOjKmNHQKsDOZg6f4uBf62Q== +"@metamask/json-rpc-engine@^8.0.1", "@metamask/json-rpc-engine@^8.0.2": + version "8.0.2" + resolved "https://registry.yarnpkg.com/@metamask/json-rpc-engine/-/json-rpc-engine-8.0.2.tgz#29510a871a8edef892f838ee854db18de0bf0d14" + integrity sha512-IoQPmql8q7ABLruW7i4EYVHWUbF74yrp63bRuXV5Zf9BQwcn5H9Ww1eLtROYvI1bUXwOiHZ6qT5CWTrDc/t/AA== dependencies: - "@metamask/json-rpc-engine" "^7.3.2" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/safe-event-emitter" "^3.0.0" + "@metamask/utils" "^8.3.0" + +"@metamask/json-rpc-middleware-stream@^7.0.1": + version "7.0.2" + resolved "https://registry.yarnpkg.com/@metamask/json-rpc-middleware-stream/-/json-rpc-middleware-stream-7.0.2.tgz#2e8b2cbc38968e3c6239a9144c35bbb08a8fb57d" + integrity sha512-yUdzsJK04Ev98Ck4D7lmRNQ8FPioXYhEUZOMS01LXW8qTvPGiRVXmVltj2p4wrLkh0vW7u6nv0mNl5xzC5Qmfg== + dependencies: + "@metamask/json-rpc-engine" "^8.0.2" "@metamask/safe-event-emitter" "^3.0.0" "@metamask/utils" "^8.3.0" readable-stream "^3.6.2" @@ -2153,6 +2162,24 @@ "@metamask/utils" "^5.0.0" readable-stream "2.3.3" +"@metamask/providers@16.1.0": + version "16.1.0" + resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-16.1.0.tgz#7da593d17c541580fa3beab8d9d8a9b9ce19ea07" + integrity sha512-znVCvux30+3SaUwcUGaSf+pUckzT5ukPRpcBmy+muBLC0yaWnBcvDqGfcsw6CBIenUdFrVoAFa8B6jsuCY/a+g== + dependencies: + "@metamask/json-rpc-engine" "^8.0.1" + "@metamask/json-rpc-middleware-stream" "^7.0.1" + "@metamask/object-multiplex" "^2.0.0" + "@metamask/rpc-errors" "^6.2.1" + "@metamask/safe-event-emitter" "^3.1.1" + "@metamask/utils" "^8.3.0" + detect-browser "^5.2.0" + extension-port-stream "^3.0.0" + fast-deep-equal "^3.1.3" + is-stream "^2.0.0" + readable-stream "^3.6.2" + webextension-polyfill "^0.10.0" + "@metamask/providers@^10.2.1": version "10.2.1" resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.1.tgz#61304940adeccc7421dcda30ffd1d834273cc77b" @@ -2171,24 +2198,6 @@ pump "^3.0.0" webextension-polyfill-ts "^0.25.0" -"@metamask/providers@^15.0.0": - version "15.0.0" - resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-15.0.0.tgz#e8957bb89d2f3379b32b60117d79a141e44db2bc" - integrity sha512-FXvL1NQNl6I7fMOJTfQYcBlBZ33vSlm6w80cMpmn8sJh0Lb7wcBpe02UwBsNlARnI+Qsr26XeDs6WHUHQh8CuA== - dependencies: - "@metamask/json-rpc-engine" "^7.3.2" - "@metamask/json-rpc-middleware-stream" "^6.0.2" - "@metamask/object-multiplex" "^2.0.0" - "@metamask/rpc-errors" "^6.2.1" - "@metamask/safe-event-emitter" "^3.0.0" - "@metamask/utils" "^8.3.0" - detect-browser "^5.2.0" - extension-port-stream "^3.0.0" - fast-deep-equal "^3.1.3" - is-stream "^2.0.0" - readable-stream "^3.6.2" - webextension-polyfill "^0.10.0" - "@metamask/providers@^8.1.1": version "8.1.1" resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-8.1.1.tgz#7b0dbb54700c949aafba24c9b98e6f4e9d81f325" @@ -2233,6 +2242,11 @@ resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.0.0.tgz#8c2b9073fe0722d48693143b0dc8448840daa3bd" integrity sha512-j6Z47VOmVyGMlnKXZmL0fyvWfEYtKWCA9yGZkU3FCsGZUT5lHGmvaV9JA5F2Y+010y7+ROtR3WMXIkvl/nVzqQ== +"@metamask/safe-event-emitter@^3.1.1": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-3.1.1.tgz#e89b840a7af8097a8ed4953d8dc8470d1302d3ef" + integrity sha512-ihb3B0T/wJm1eUuArYP4lCTSEoZsClHhuWyfo/kMX3m/odpqNcPfsz5O2A3NT7dXCAgWPGDQGPqygCpgeniKMw== + "@metamask/sdk-communication-layer@0.14.3": version "0.14.3" resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.14.3.tgz#0e7ec8e472641273da5802f3b357687ce12369c3" @@ -2247,15 +2261,15 @@ utf-8-validate "^6.0.3" uuid "^8.3.2" -"@metamask/sdk-communication-layer@0.26.0": - version "0.26.0" - resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.26.0.tgz#4578138328823762ee5b25f7943bb7910b888aa6" - integrity sha512-Pu9y2YoQMC7mnaVyr2MddUUofPqqE+rZL1NFk30lJbNCVGopWSubWoF8fJZw54fWngNEN0HXPNkTokd5UCvwjQ== +"@metamask/sdk-communication-layer@0.27.0": + version "0.27.0" + resolved "https://registry.yarnpkg.com/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.27.0.tgz#8d618fadd39f11627d5b3ef1bc72867439e33ff4" + integrity sha512-G9LCaQzIqp5WmUmvHN6UUdjWrBh67MbRobmbbs5fcc2+9XFhj3vBgtyleUYjun91jSlPHoZeo+f/Pj4/WoPIJg== dependencies: bufferutil "^4.0.8" date-fns "^2.29.3" debug "^4.3.4" - utf-8-validate "^6.0.3" + utf-8-validate "^5.0.2" uuid "^8.3.2" "@metamask/sdk-install-modal-web@0.14.1": @@ -2271,10 +2285,10 @@ react-dom "^18.2.0" react-i18next "^13.2.2" -"@metamask/sdk-install-modal-web@0.26.0": - version "0.26.0" - resolved "https://registry.yarnpkg.com/@metamask/sdk-install-modal-web/-/sdk-install-modal-web-0.26.0.tgz#412a89747a96e94233eb59d2779ab26656096688" - integrity sha512-LyDQFIsWWyU0ZgZR3O9LzRqKzXcYUEGJRCNfb26IjFOquvmQosbhQV0jDNlVa8Tk2Fg4ykTPoaauANh6sVJYVQ== +"@metamask/sdk-install-modal-web@0.26.5": + version "0.26.5" + resolved "https://registry.yarnpkg.com/@metamask/sdk-install-modal-web/-/sdk-install-modal-web-0.26.5.tgz#b696c78818adaff85d01a4f41fecc8fd2c80bc59" + integrity sha512-qVA9Nk+NorGx5hXyODy5wskptE8R7RNYTYt49VbQpJogqbbVe1dnJ98+KaA43PBN4XYMCXmcIhULNiEHGsLynA== dependencies: qr-code-styling "^1.6.0-rc.1" @@ -2309,15 +2323,15 @@ util "^0.12.4" uuid "^8.3.2" -"@metamask/sdk@^0.26.1": - version "0.26.1" - resolved "https://registry.yarnpkg.com/@metamask/sdk/-/sdk-0.26.1.tgz#9484c868a4826058781a037237959f3fe2b669d6" - integrity sha512-WLlCBtqqsi+DEqW7DfBq0k1Hu3fqIkiNFH0EehUix0UDPWnpv6a6acrOFoeB4ga/lbaQK2CrlIfUp0shaYdZbA== +"@metamask/sdk@^0.27.0": + version "0.27.0" + resolved "https://registry.yarnpkg.com/@metamask/sdk/-/sdk-0.27.0.tgz#38617985b8305a0f5d482cdd7af8ddec87968bb7" + integrity sha512-6sMjr/0qR700X1svPGEQ4rBdtccidBLeTC27fYQc7r9ROgSixB1DUUAyu/LoySVqt3Hu/Zm7NnAHXuT228ht7A== dependencies: "@metamask/onboarding" "^1.0.1" - "@metamask/providers" "^15.0.0" - "@metamask/sdk-communication-layer" "0.26.0" - "@metamask/sdk-install-modal-web" "0.26.0" + "@metamask/providers" "16.1.0" + "@metamask/sdk-communication-layer" "0.27.0" + "@metamask/sdk-install-modal-web" "0.26.5" "@types/dom-screen-wake-lock" "^1.0.0" bowser "^2.9.0" cross-fetch "^4.0.0" @@ -2325,7 +2339,7 @@ eciesjs "^0.3.15" eth-rpc-errors "^4.0.3" eventemitter2 "^6.4.7" - i18next "22.5.1" + i18next "23.11.5" i18next-browser-languagedetector "7.1.0" obj-multiplex "^1.0.0" pump "^3.0.0" @@ -5494,6 +5508,13 @@ "@walletconnect/window-getters" "^1.0.1" tslib "1.14.1" +"@web3-onboard/gnosis@^2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/gnosis/-/gnosis-2.3.1.tgz#e62b4095097a3d59848eb01986616f6909d5f936" + integrity sha512-p+27gDF8BAr8MuhKkUisbP/d7LvFZs2ifbOsR5Xs61oObw7HNifN3IzUbeMaUCZ1l8P7JMgU1TOqE75GPwl1fg== + dependencies: + "@web3-onboard/common" "^2.4.1" + "@web3-onboard/wagmi@2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@web3-onboard/wagmi/-/wagmi-2.0.0.tgz#9beda01b4539d399aa0420e7afaacc09fc25ed7d" @@ -10016,7 +10037,7 @@ i18next@22.5.1: dependencies: "@babel/runtime" "^7.20.6" -i18next@^23.11.5: +i18next@23.11.5, i18next@^23.11.5: version "23.11.5" resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef" integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA== From dbb58a34c8bf456d76c35c7edda21998065859c4 Mon Sep 17 00:00:00 2001 From: tokenpocketteam001 Date: Tue, 6 Aug 2024 06:25:03 +0900 Subject: [PATCH 4/5] docs: Update README.md (#2263) Add MetaMask wallet --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 8602ac61a..72bf72162 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ For full documentation, check out the README.md for each package or the [docs pa - [Frame](packages/frame/README.md) - [Blocto](packages/blocto/README.md) - [Particle Network](packages/particle-network/README.md) +- [MetaMask](packages/metamask/README.md) **Hardware Wallets** From 6e71701b7eeb46fe59e85cdc479ff69a313acf87 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Mon, 5 Aug 2024 15:26:55 -0600 Subject: [PATCH 5/5] Remove TP functionality, add console error if TP is added as an init prop (#2266) --- .../[...5]transaction-preview/+page.md | 395 +----------------- packages/core/package.json | 1 - packages/core/src/configuration.ts | 1 - packages/core/src/index.ts | 21 +- packages/core/src/types.ts | 10 +- packages/core/src/validation.ts | 9 +- packages/core/src/views/Index.svelte | 28 -- packages/demo/package.json | 2 +- packages/transaction-preview/README.md | 367 +--------------- packages/transaction-preview/package.json | 2 +- 10 files changed, 17 insertions(+), 819 deletions(-) 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",