Remove TransactionPreview functionality, add console error if TP is added as an init prop

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",

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
 }

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,32 +240,16 @@ function init(options: InitOptions): OnboardAPI {
     apiKey,
     initialWalletInit: wallets,
     gas,
-    transactionPreview,
     unstoppableResolution,
     wagmi: wagmiApi
   })
 
   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)

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<ContainerElements>
   /**
-   * 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
 }
 

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()

packages/core/src/views/Index.svelte

@@ -407,16 +407,6 @@
   <SwitchChain />
 {/if}
 
-{#if !$accountCenter$.enabled && !$notify$.enabled}
-  <div
-    class="container flex flex-column fixed z-indexed"
-    style="top: 0; right: 0; {device.type === 'mobile'
-      ? 'padding-bottom: 0;'
-      : ''} "
-    id="w3o-transaction-preview-container"
-  />
-{/if}
-
 {#if displayAccountCenterNotifySameContainer}
   <div
     class="container flex flex-column fixed z-indexed"
@@ -440,19 +430,13 @@
         {/if}
       {/await}
     {/if}
-    {#if $accountCenter$.position.includes('bottom')}
-      <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
-    {/if}
     <div id="account-center-with-notify">
       {#await accountCenterComponent then AccountCenter}
         {#if AccountCenter}
           <svelte:component this={AccountCenter} />
         {/if}
       {/await}
     </div>
-    {#if $accountCenter$.position.includes('top')}
-      <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}
         {#if Notify}
@@ -478,9 +462,6 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    {#if $accountCenter$.position.includes('bottom')}
-      <div id="w3o-transaction-preview-container" style="margin-bottom: 8px;" />
-    {/if}
     <div>
       {#if $accountCenter$.enabled && $wallets$.length}
         {#await accountCenterComponent then AccountCenter}
@@ -490,9 +471,6 @@
         {/await}
       {/if}
     </div>
-    {#if $accountCenter$.position.includes('top')}
-      <div id="w3o-transaction-preview-container" style="margin-top: 8px;" />
-    {/if}
   </div>
 {/if}
 {#if displayNotifySeparate}
@@ -506,9 +484,6 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    {#if $notify$.position.includes('top')}
-      <div id="w3o-transaction-preview-container" />
-    {/if}
     {#await notifyComponent then Notify}
       {#if Notify}
         <svelte:component
@@ -519,8 +494,5 @@
         />
       {/if}
     {/await}
-    {#if $notify$.position.includes('bottom')}
-      <div id="w3o-transaction-preview-container" />
-    {/if}
   </div>
 {/if}

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",