Merge pull request #1530 from blocknative/release/2.20.1

Release 2.20.1

Author: Adamj1232

.github/workflows/docs.yml

@@ -51,6 +51,12 @@ jobs:
           NODE_OPTIONS: "--max_old_space_size=8192"
         run: yarn build
 
+      - name: Generate the sitemap
+        uses: cicirello/generate-sitemap@v1
+        with:
+          path-to-root: docs
+          base-url-path: https://www.onboard.blocknative.com/
+        
       - name: Peak at folder contents
         run: ls -al
 

assets/transaction-preview.png

@@ -54,14 +54,15 @@
   },
   "type": "module",
   "dependencies": {
+    "bnc-sdk": "^4.6.6",
     "@web3-onboard/coinbase": "^2.1.4",
-    "@web3-onboard/core": "^2.14.0",
+    "@web3-onboard/core": "^2.15.1-alpha.1",
     "@web3-onboard/dcent": "^2.2.3",
     "@web3-onboard/enkrypt": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.4",
     "@web3-onboard/gnosis": "^2.1.6",
-    "@web3-onboard/injected-wallets": "^2.6.2",
+    "@web3-onboard/injected-wallets": "^2.8.0-alpha.1",
     "@web3-onboard/keepkey": "^2.3.3",
     "@web3-onboard/keystone": "^2.3.3",
     "@web3-onboard/ledger": "^2.4.2",
@@ -71,6 +72,7 @@
     "@web3-onboard/sequence": "^2.0.4",
     "@web3-onboard/tallyho": "^2.0.1",
     "@web3-onboard/torus": "^2.2.0",
+    "@web3-onboard/transaction-preview": "^2.0.3-alpha.1",
     "@web3-onboard/trezor": "^2.3.3",
     "@web3-onboard/trust": "^2.0.0",
     "@web3-onboard/uauth": "^2.0.1",

docs/package.json

@@ -0,0 +1,124 @@
+<script>
+  import { onMount } from 'svelte'
+  import { ethers } from 'ethers'
+
+  let transactionPreview
+  let blocknativeSdk
+
+  const buildTransaction = async () => {
+    const addressFrom = '0xab5801a7d398351b8be11c439e05c5b3259aec9b'
+
+    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 uni = '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984'
+    let swapTxData
+    let approveTxData
+    const createTransaction = async () => {
+      const swapContract = new ethers.Contract(CONTRACT_ADDRESS, uniswapV2router_interface)
+      const erc20_contract = new ethers.Contract(weth, erc20_interface)
+      const oneHundredUni = ethers.BigNumber.from('100000000000000000000')
+      approveTxData = await erc20_contract.populateTransaction.approve(
+        CONTRACT_ADDRESS,
+        oneHundredUni
+      )
+
+      const amountOutMin = 0
+      const amountOutMinHex = ethers.BigNumber.from(amountOutMin.toString())._hex
+
+      const path = [uni, weth]
+      const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time
+
+      const inputAmountHex = oneHundredUni.toHexString()
+
+      swapTxData = await swapContract.populateTransaction.swapExactTokensForETH(
+        inputAmountHex,
+        amountOutMinHex,
+        path,
+        addressFrom,
+        deadline
+      )
+    }
+    await createTransaction()
+    const account_address = '0xab5801a7d398351b8be11c439e05c5b3259aec9b'
+    const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D'
+
+    return [
+      {
+        from: account_address,
+        to: uni,
+        input: approveTxData.data,
+        gas: 1000000,
+        gasPrice: 48000000000,
+        value: 0
+      },
+      {
+        from: account_address,
+        to: uniswapV2Router,
+        input: swapTxData.data,
+        gas: 1000000,
+        gasPrice: 48000000000,
+        value: 0
+      }
+    ]
+  }
+
+
+  const handlePreview = async () => {
+    await transactionPreview.init({
+      apiKey: '133a026b-c7a0-419c-a00b-66255b3cd487',
+      sdk: blocknativeSdk,
+      containerElement: '#tp-container'
+    })
+
+    const stubTrans = await buildTransaction()
+    await transactionPreview.previewTransaction(stubTrans)
+
+  }
+
+  onMount(async () => {
+    const { default: Blocknative } = await import('bnc-sdk')
+    const { default: transactionPreviewModule } = await import('@web3-onboard/transaction-preview')
+
+    blocknativeSdk = new Blocknative({
+      dappId: '133a026b-c7a0-419c-a00b-66255b3cd487',
+      networkId: 1
+    })
+
+    transactionPreview = transactionPreviewModule({
+      requireTransactionApproval: true
+    })
+  })
+</script>
+
+<div>
+  {#await blocknativeSdk && transactionPreview then Preview}
+    {#if Preview}
+      <button
+        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"
+        on:click={() => handlePreview()}
+      >
+        Preview Transaction
+      </button>
+
+      <div id="tp-container" />
+    {/if}
+  {/await}
+</div>
+
+<style>
+  #tp-container {
+    height: auto;
+    width: 316px;
+    margin-top: 12px;
+  }
+</style>

docs/src/lib/assets/transaction-preview.png

@@ -1,3 +1,4 @@
 export * from './examples'
 export * from './gas'
 export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'
+export { default as TransactionPreviewButton } from './TransactionPreviewButton.svelte'

docs/src/lib/components/TransactionPreviewButton.svelte

@@ -181,7 +181,8 @@ const intiOnboard = async (theme) => {
       ]
     },
     accountCenter: { desktop: { enabled: true }, mobile: { enabled: true } },
-    theme: theme || 'system'
+    theme: theme || 'system',
+    apiKey: 'da1b962d-314d-4903-bfe1-426821d14a35'
   })
 }
 

docs/src/lib/components/index.ts

@@ -1,6 +1,7 @@
 <script>
   import previewGif from '$lib/assets/transaction-preview.gif'
   import previewImg from '$lib/assets/transaction-preview.png'
+  import { TransactionPreviewButton } from '$lib/components'
 </script>
 
 # Transaction Preview
@@ -9,8 +10,12 @@ A modular UI for previewing a single or set of unsigned Ethereum transactions.
 
 <img src="{previewImg}" alt="Transaction Preview Flow image"/>
 
-Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api)
+### Try Transaction Preview
+
+Preview Vitalik swapping 100 UNI tokens for ETH using Transaction Preview
+<TransactionPreviewButton/>
 
+Full Simulation Platform API documentation can be found [here](https://docs.blocknative.com/transaction-preview-api)
 ### Install
 
 <Tabs values={['yarn', 'npm']}>
@@ -74,13 +79,14 @@ const onboard = Onboard({
 
 ### Standalone Usage
 
+To use the Transaction Preview package without web3-onboard all a developer needs to do is:
 
-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'
 
@@ -182,8 +188,7 @@ console.log(simData)
 ```typescript
 export type TransactionPreviewModule = (options: TransactionPreviewOptions) => TransactionPreviewAPI
 
-export type FullPreviewOptions = TransactionPreviewOptions &
-  TransactionPreviewInitOptions
+export type FullPreviewOptions = TransactionPreviewOptions & TransactionPreviewInitOptions
 
 export type TransactionPreviewAPI = {
   /**
@@ -209,9 +214,7 @@ export type TransactionPreviewAPI = {
    * Note: the package will need to initialized with the `init`
    * function prior to usage
    */
-  previewTransaction: (
-    transaction: TransactionForSim[]
-  ) => Promise<MultiSimOutput>
+  previewTransaction: (transaction: TransactionForSim[]) => Promise<MultiSimOutput>
 }
 
 export type PatchedEIP1193Provider = EIP1193Provider & { simPatched: boolean }

docs/src/lib/services/onboard.js

@@ -312,6 +312,7 @@ const injected = injectedModule({
 - Rainbow - _Desktop & Mobile_
 - DeFiWallet - _Desktop & Mobile_
 - ApexWallet - _Desktop_
+- BifrostWallet - _Desktop & Mobile_
 
 ## Build Environments
 

docs/src/routes/docs/[...3]modules/transaction-preview.md

@@ -2969,15 +2969,15 @@
     ethers "5.5.4"
     joi "^17.6.1"
 
-"@web3-onboard/core@^2.14.0":
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.14.1.tgz#20d5f8196cdd4455a6e2daa69319fb697733934c"
-  integrity sha512-d5rG4wg2gOUsgiNAaAucJOzDdIM2WTxLPBN/sXR1V6eWatn6YcXyduW7Nr0n1Hl/2d8eRnlHTeSeb9YA50niVw==
+"@web3-onboard/core@^2.15.1-alpha.1":
+  version "2.15.1-alpha.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.15.1-alpha.1.tgz#a6c241ba7eb84f40547e57b8192ecd46759ec5ad"
+  integrity sha512-CrAj0WkBxO52j2JUs5YFIbvfwyrUoWXO7B3QOG6VrQ9w4HRXO5lVBsD2RYMSA5fTbAbRZ7VwPiHCdmQ/ztKYLg==
   dependencies:
     "@unstoppabledomains/resolution" "^8.0"
     "@web3-onboard/common" "^2.2.3"
     bignumber.js "^9.0.0"
-    bnc-sdk "^4.6.5"
+    bnc-sdk "^4.6.7"
     bowser "^2.11.0"
     ethers "5.5.3"
     eventemitter3 "^4.0.7"
@@ -3044,10 +3044,10 @@
     joi "^17.6.1"
     rxjs "^7.5.2"
 
-"@web3-onboard/injected-wallets@^2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@web3-onboard/injected-wallets/-/injected-wallets-2.6.2.tgz#d6bebd623098c06868ad5c4efdaceb90082732e3"
-  integrity sha512-vOUWluIiYSrsC1TyFNFA0GXzcAFcfgy4mG6iXGJSjbNx9/54VilM6UtSaVhXb4diqQZyinuZj18UexdSxDAcfQ==
+"@web3-onboard/injected-wallets@^2.8.0-alpha.1":
+  version "2.8.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/injected-wallets/-/injected-wallets-2.8.0-alpha.1.tgz#eb3b8337c527348f1513bf14a25263a89446b95d"
+  integrity sha512-WjnoMv0kAeuJLRyhA0wqTVYwfRMmkir3igO1LxInbBADeHxbVVX+HcxO1zWpJaGkkDJOWvPSPHjlQJoNUZJFvg==
   dependencies:
     "@web3-onboard/common" "^2.2.3"
     joi "^17.6.1"
@@ -3138,6 +3138,19 @@
     "@toruslabs/torus-embed" "1.38.2"
     "@web3-onboard/common" "^2.2.3"
 
+"@web3-onboard/transaction-preview@^2.0.3-alpha.1":
+  version "2.0.3-alpha.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/transaction-preview/-/transaction-preview-2.0.3-alpha.1.tgz#b8945c3b785dc1e0281709c01b464fe45aea1570"
+  integrity sha512-iJZtvGcYh3ZbmTzaNRAUWKmX4VwgbgaKbmlYCdmeOvNjB7fZykzqr9CXbGwwVmfI3xA7zT17hP5M0WjGFyuDFA==
+  dependencies:
+    "@web3-onboard/common" "^2.2.3"
+    bnc-sdk "^4.6.7"
+    bowser "^2.11.0"
+    joi "^17.6.1"
+    rxjs "^7.5.2"
+    svelte "^3.49.0"
+    svelte-i18n "^3.3.13"
+
 "@web3-onboard/trezor@^2.3.3":
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/@web3-onboard/trezor/-/trezor-2.3.3.tgz#0a9f2296e4e3365637a798eacfb3d2c0696e0b40"
@@ -3918,10 +3931,20 @@ bnb-javascript-sdk-nobroadcast@^2.16.14:
     uuid "^3.3.2"
     websocket-stream "^5.5.0"
 
-bnc-sdk@^4.6.5:
-  version "4.6.5"
-  resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-4.6.5.tgz#9f91eb2f213c0c4abf8b5f134f673a3f9a981ea2"
-  integrity sha512-W++M1kY5SensQUpig+EXqKEOfRgKrrobd8l3r9oOa06xJmxmMH4DPUm28IcESVX6NWj4I+bhgghOVDh/SFdE8Q==
+bnc-sdk@^4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-4.6.6.tgz#ef5501a0c68014efae24d00d2e3fb706318fa00d"
+  integrity sha512-cpavy/WBQrkw5PZpnuUAvxzj/RjmP1vSldOEG+nonf7n/4sykScDO6KrJN2oVhEMaxHOqOVf2rOugSL5t515eA==
+  dependencies:
+    crypto-es "^1.2.2"
+    nanoid "^3.3.1"
+    rxjs "^6.6.3"
+    sturdy-websocket "^0.1.12"
+
+bnc-sdk@^4.6.7:
+  version "4.6.7"
+  resolved "https://registry.yarnpkg.com/bnc-sdk/-/bnc-sdk-4.6.7.tgz#138a22e04c95c2c697fb836092358d21957e2114"
+  integrity sha512-jIQ6cmeRBgvH/YDLuYRr2+kxDGcAAi0SOvjlO5nQ5cWdbslw+ASWftd1HmxiVLNCiwEH5bSc/t8a0agZ5njTUQ==
   dependencies:
     crypto-es "^1.2.2"
     nanoid "^3.3.1"

docs/src/routes/docs/[...4]wallets/injected.md

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "private": true,
   "workspaces": {
     "packages": [

docs/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "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",
@@ -70,7 +70,7 @@
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "@web3-onboard/gas": "^2.0.0",
-    "@web3-onboard/transaction-preview": "^2.0.2",
+    "@web3-onboard/transaction-preview": "^2.0.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
@@ -87,7 +87,7 @@
     "@unstoppabledomains/resolution": "^8.0",
     "@web3-onboard/common": "^2.2.3",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "^4.6.6",
+    "bnc-sdk": "^4.6.7",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",

package.json

@@ -3,7 +3,7 @@
     "selectingWallet": {
       "header": "Available Wallets",
       "sidebar": {
-        "heading": "Get Started",
+        "heading": "",
         "subheading": "Connect your wallet",
         "paragraph": "Connecting your wallet is like “logging in” to Web3. Select your wallet from the options to get started."
       },

packages/core/package.json

@@ -211,7 +211,7 @@ function init(options: InitOptions): OnboardAPI {
   if (apiKey && transactionPreview) {
     const getBnSDK = async () => {
       transactionPreview.init({
-        containerElement: '#transaction-preview-container',
+        containerElement: '#w3o-transaction-preview-container',
         sdk: await getBlocknativeSdk(),
         apiKey
       })

packages/core/src/i18n/en.json

@@ -412,7 +412,7 @@
     style="top: 0; right: 0; {device.type === 'mobile'
       ? 'padding-bottom: 0;'
       : ''} "
-    id="transaction-preview-container"
+    id="w3o-transaction-preview-container"
   />
 {/if}