diff --git a/docs/package.json b/docs/package.json
index 1ced36ccd..32209b728 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -56,7 +56,7 @@
   "dependencies": {
     "bnc-sdk": "^4.6.6",
     "@web3-onboard/coinbase": "^2.1.4",
-    "@web3-onboard/core": "^2.15.1-alpha.1",
+    "@web3-onboard/core": "^2.15.2-alpha.1",
     "@web3-onboard/dcent": "^2.2.3",
     "@web3-onboard/enkrypt": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
@@ -72,7 +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/transaction-preview": "^2.0.4-alpha.1",
     "@web3-onboard/trezor": "^2.3.3",
     "@web3-onboard/trust": "^2.0.0",
     "@web3-onboard/uauth": "^2.0.1",
diff --git a/package.json b/package.json
index ea13abb3a..b564de751 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "private": true,
   "workspaces": {
     "packages": [
diff --git a/packages/core/package.json b/packages/core/package.json
index 4fad11d17..667dd8f06 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "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.3",
+    "@web3-onboard/transaction-preview": "^2.0.4",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte
index 5bc2be896..8fe0c8198 100644
--- a/packages/core/src/views/Index.svelte
+++ b/packages/core/src/views/Index.svelte
@@ -440,7 +440,7 @@
       {/await}
     {/if}
     {#if $accountCenter$.position.includes('bottom')}
-      <div id="transaction-preview-container" style="margin-bottom: 8px;" />
+      <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
     {/if}
     <div
       style={!$accountCenter$.expanded &&
@@ -461,7 +461,7 @@
       {/await}
     </div>
     {#if $accountCenter$.position.includes('top')}
-      <div id="transaction-preview-container" style="margin-top: 8px;" />
+      <div id="w3o-transaction-preview-container" style="margin-top: 8px;" />
     {/if}
     {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile}
       {#await notifyComponent then Notify}
@@ -489,7 +489,7 @@
       : ''} "
   >
     {#if $accountCenter$.position.includes('bottom')}
-      <div id="transaction-preview-container" style="margin-bottom: 8px;" />
+      <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
     {/if}
     <div
       style={!$accountCenter$.expanded &&
@@ -511,7 +511,7 @@
       {/if}
     </div>
     {#if $accountCenter$.position.includes('top')}
-      <div id="transaction-preview-container" style="margin-top: 8px;" />
+      <div id="w3o-transaction-preview-container" style="margin-top: 8px;" />
     {/if}
   </div>
 {/if}
@@ -527,7 +527,7 @@
       : ''} "
   >
     {#if $notify$.position.includes('top')}
-      <div id="transaction-preview-container" />
+      <div id="w3o-transaction-preview-container" />
     {/if}
     {#await notifyComponent then Notify}
       {#if Notify}
@@ -540,7 +540,7 @@
       {/if}
     {/await}
     {#if $notify$.position.includes('bottom')}
-      <div id="transaction-preview-container" />
+      <div id="w3o-transaction-preview-container" />
     {/if}
   </div>
 {/if}
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 3fc8ea58e..9e40a7ca4 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -23,9 +23,9 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.15.1",
+    "@web3-onboard/core": "^2.15.2",
     "@web3-onboard/coinbase": "^2.1.4",
-    "@web3-onboard/transaction-preview": "^2.0.3",
+    "@web3-onboard/transaction-preview": "^2.0.4",
     "@web3-onboard/dcent": "^2.2.3",
     "@web3-onboard/frontier": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index 46183bb8b..3ef8d6e21 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -42,7 +42,7 @@
     new VConsole()
   }
 
-  const apiKey = '0fcf74ed-b95b-4b8d-a8d8-4d655ae479d9'
+  const apiKey = '7ed5f4aa-fb90-4124-8ef9-f69e3e8e666d'
   const infura_key = '80633e48116943128cbab25e402764ab'
 
   let defaultTransactionObject = JSON.stringify(
@@ -384,6 +384,56 @@
     console.log(transactionHash)
   }
 
+
+  const swapTokens = async (provider) => {
+    const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
+
+const signer = ethersProvider.getSigner()
+
+const addressFrom = '0xc572779D7839B998DF24fc316c89BeD3D450ED13'
+
+const CONTRACT_ADDRESS = '0x7a250d5630b4cf539739df2c5dacb4c659f2488d'
+
+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
+const swapContract = new ethers.Contract(
+  CONTRACT_ADDRESS,
+  uniswapV2router_interface
+)
+const tokenAmount = ethers.BigNumber.from(`1000000000000000000`)
+
+const amountOutMin = 0
+const amountOutMinHex = ethers.BigNumber.from(amountOutMin.toString())._hex
+
+const path = [oneInch, weth]
+const deadline = Math.floor(Date.now() / 1000) + 60 * 1 // 1 minutes from the current Unix time
+
+const inputAmountHex = tokenAmount.toHexString()
+
+swapTxData = await swapContract.populateTransaction.swapExactTokensForETH(
+  inputAmountHex,
+  amountOutMinHex,
+  path,
+  addressFrom,
+  deadline
+)
+const uniswapV2Router = '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D'
+
+const popTransaction = await signer.populateTransaction(swapTxData)
+
+await signer.sendTransaction({
+  ...popTransaction,
+  from: addressFrom,
+  to: uniswapV2Router,
+  value: 0
+})
+}
+
   const signMessage = async (provider, address) => {
     const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
 
@@ -664,7 +714,7 @@
               placeholder="0x..."
               bind:value={toAddress}
             />
-            <button on:click={sendTransaction(provider)}>
+            <button on:click={() => swapTokens(provider)}>
               Send Transaction
             </button>
           </div>
diff --git a/packages/react/package.json b/packages/react/package.json
index ea26878c0..f2e0dde76 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.15.1",
+    "@web3-onboard/core": "^2.15.2",
     "@web3-onboard/common": "^2.2.3",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/transaction-preview/package.json b/packages/transaction-preview/package.json
index 08e898c44..ced0f57f4 100644
--- a/packages/transaction-preview/package.json
+++ b/packages/transaction-preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/transaction-preview",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "In app preview of Ethereum transactions",
   "keywords": [
     "Ethereum",
diff --git a/packages/transaction-preview/src/views/Maximized.svelte b/packages/transaction-preview/src/views/Maximized.svelte
index 3d3469416..ee2ee88f3 100644
--- a/packages/transaction-preview/src/views/Maximized.svelte
+++ b/packages/transaction-preview/src/views/Maximized.svelte
@@ -57,13 +57,13 @@
         simResponse.gasUsed[index] * simResponse.transactions[index].gasPrice
       )
     }
-    if (simResponse.transactions[index].type === 2) {
-      totalGasInEth += cleanGas(
-        simResponse.gasUsed[index] *
-          (simResponse.transactions[index].baseFeePerGasGwei +
-            simResponse.transactions[index].maxPriorityFeePerGasGwei)
-      )
-    }
+    // if (simResponse.transactions[index].type === 2) {
+    //   totalGasInEth += cleanGas(
+    //     simResponse.gasUsed[index] *
+    //       (simResponse.transactions[index].baseFeePerGasGwei +
+    //         simResponse.transactions[index].maxPriorityFeePerGasGwei)
+    //   )
+    // }
   }
 
   const gasUsed = (index: number) => {
@@ -291,6 +291,7 @@
               </tr>
             {/each}
           {/each}
+          {#if totalGasInEth && totalGasUsed}
           <tr>
             <td class="token-text">ETH</td>
             <td class="negative"
@@ -303,6 +304,7 @@
               </div></td
             >
           </tr>
+          {/if}
         {/if}
       </tbody>
     </table>
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a2cf483b2..4aa63ee5a 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. 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, 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",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/core": "^2.15.1",
+    "@web3-onboard/core": "^2.15.2",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {