[transaction-preview: v2.0.0-alpha.1 , core: v2.11.0-alpha.1, react, vue]: Feature - Transaction Preview Package (#1359)

* base stuff
* Remove check for hash resolution when destroying the app, destroy app within catch
* Update styles to match updated mocks
* Remove unwanted cssvars
* Handle for empty TPs
* Build fix in dcent, check in TP for ethchain to avoid sending extra payloads
* using SDK
* Working with sdk
* Working and refactored
* Updating
* Update readme for new usage
* revert changes to sequence

Author: Adamj1232

.circleci/config.yml

@@ -327,6 +327,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-build-steps
+  build-transaction-preview:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -491,6 +497,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-staging-build-steps
+  build-staging-transaction-preview:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/transaction-preview
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -657,3 +669,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-uauth:
           <<: *deploy_staging_filters
+  transaction-preview:
+    jobs:
+      - build-transaction-preview:
+          <<: *deploy_production_filters
+      - build-staging-transaction-preview:
+          <<: *deploy_staging_filters

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.10.1",
+  "version": "2.11.0-alpha.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",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@web3-onboard/common": "^2.2.3",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "^4.4.1",
+    "bnc-sdk": "^4.6.2",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",

packages/core/src/configuration.ts

@@ -8,7 +8,8 @@ export let configuration: Configuration = {
   device: getDevice(),
   initialWalletInit: [],
   gas: null,
-  containerElements: { accountCenter: null }
+  containerElements: { accountCenter: null },
+  transactionPreview: null
 }
 
 export function updateConfiguration(update: Partial<Configuration>): void {

packages/core/src/disconnect.ts

@@ -1,4 +1,4 @@
-import { getBlocknativeSdk } from './services.js'
+import { getBNMulitChainSdk } from './services.js'
 import { state } from './store/index.js'
 import { removeWallet } from './store/actions.js'
 import { disconnectWallet$ } from './streams.js'
@@ -15,7 +15,7 @@ async function disconnect(options: DisconnectOptions): Promise<WalletState[]> {
 
   if (state.get().notify.enabled) {
     // handle unwatching addresses
-    const sdk = await getBlocknativeSdk()
+    const sdk = await getBNMulitChainSdk()
 
     if (sdk) {
       const wallet = state.get().wallets.find(wallet => wallet.label === label)

packages/core/src/index.ts

@@ -3,7 +3,7 @@ import connectWallet from './connect.js'
 import disconnectWallet from './disconnect.js'
 import setChain from './chain.js'
 import { state } from './store/index.js'
-import { reset$ } from './streams.js'
+import { reset$, wallets$ } from './streams.js'
 import initI18N from './i18n/index.js'
 import App from './views/Index.svelte'
 import type { InitOptions, Notify } from './types.js'
@@ -29,6 +29,8 @@ import {
   setWalletModules,
   updateConnectModal
 } from './store/actions.js'
+import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview'
+import { getBlocknativeSdk } from './services'
 
 const API = {
   connectWallet,
@@ -90,7 +92,8 @@ function init(options: InitOptions): OnboardAPI {
     notify,
     gas,
     connect,
-    containerElements
+    containerElements,
+    transactionPreview
   } = options
 
   updateConfiguration({ containerElements })
@@ -197,9 +200,26 @@ function init(options: InitOptions): OnboardAPI {
     svelteInstance: app,
     apiKey,
     initialWalletInit: wallets,
-    gas
+    gas,
+    transactionPreview
   })
 
+  if (transactionPreview) {
+    const getBnSDK = async () => {
+      transactionPreview.init({
+        containerElement: '#transaction-preview-container',
+        sdk: await getBlocknativeSdk(),
+        apiKey
+      })
+      wallets$.subscribe(wallets => {
+        wallets.forEach(({ provider }) => {
+          transactionPreview.patchProvider(provider as PatchedEIP1193Provider)
+        })
+      })
+    }
+    getBnSDK()
+  }
+
   return API
 }
 

packages/core/src/provider.ts

@@ -8,7 +8,7 @@ import { updateAccount, updateWallet } from './store/actions.js'
 import { validEnsChain } from './utils.js'
 import disconnect from './disconnect.js'
 import { state } from './store/index.js'
-import { getBlocknativeSdk } from './services.js'
+import { getBNMulitChainSdk } from './services.js'
 
 import type {
   ChainId,
@@ -157,7 +157,7 @@ export function trackWallet(
     // if not existing account and notifications,
     // then subscribe to transaction events
     if (state.get().notify.enabled && !existingAccount) {
-      const sdk = await getBlocknativeSdk()
+      const sdk = await getBNMulitChainSdk()
 
       if (sdk) {
         const wallet = state
@@ -227,7 +227,7 @@ export function trackWallet(
     if (chainId === connectedWalletChain.id) return
 
     if (state.get().notify.enabled) {
-      const sdk = await getBlocknativeSdk()
+      const sdk = await getBNMulitChainSdk()
 
       if (sdk) {
         const wallet = state

packages/core/src/services.ts

@@ -1,25 +1,49 @@
 import type { MultiChain } from 'bnc-sdk'
+import type SDK from 'bnc-sdk'
 import { configuration } from './configuration.js'
 import { handleTransactionUpdates } from './notify.js'
 
-let blocknativeSdk: MultiChain
+let blocknativeMultiChainSdk: MultiChain
+let blocknativeSdk: SDK
 
 /**
  *
- * @returns SDK if apikey
+ * @returns MultiChain SDK if apiKey
  */
-export async function getBlocknativeSdk(): Promise<MultiChain | null> {
+
+export async function getBNMulitChainSdk(): Promise<MultiChain | null> {
   const { apiKey } = configuration
 
   if (!apiKey) return null
 
-  if (!blocknativeSdk) {
+  if (!blocknativeMultiChainSdk) {
     const { default: Blocknative } = await import('bnc-sdk')
-    blocknativeSdk = Blocknative.multichain({
+    blocknativeMultiChainSdk = Blocknative.multichain({
       apiKey: configuration.apiKey
     })
 
-    blocknativeSdk.transactions$.subscribe(handleTransactionUpdates)
+    blocknativeMultiChainSdk.transactions$.subscribe(handleTransactionUpdates)
+  }
+
+  return blocknativeMultiChainSdk
+}
+
+/**
+ *
+ * @returns SDK if apiKey
+ */
+export async function getBlocknativeSdk(): Promise<SDK> {
+  const { apiKey } = configuration
+
+  if (!apiKey) return null
+
+  if (!blocknativeSdk) {
+    const { default: Blocknative } = await import('bnc-sdk')
+    blocknativeSdk = new Blocknative({
+      dappId: configuration.apiKey,
+      networkId: 1
+    })
+    return blocknativeSdk
   }
 
   return blocknativeSdk

packages/core/src/types.ts

@@ -12,6 +12,7 @@ import type {
 } from '@web3-onboard/common'
 
 import type gas from '@web3-onboard/gas'
+import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview'
 
 import type en from './i18n/en.json'
 import type { EthereumTransactionData, Network } from 'bnc-sdk'
@@ -53,10 +54,15 @@ export interface InitOptions {
   /** Gas module */
   gas?: typeof gas
   /**
-   * Object mapping for W3O components with the key being the DOM element to mount
-   * the component to, this defines the DOM container element for svelte to attach the component
+   * Object mapping for W3O components with the key being the DOM
+   * element to mount the component to, this defines the DOM container
+   *  element for svelte to attach the component
    */
   containerElements?: Partial<ContainerElements>
+  /**
+   * Transaction Preview module
+   */
+  transactionPreview?: TransactionPreviewAPI
 }
 
 export interface ConnectOptions {
@@ -137,6 +143,7 @@ export type Configuration = {
   apiKey?: string
   gas?: typeof gas
   containerElements?: ContainerElements
+  transactionPreview?: TransactionPreviewAPI
 }
 
 export type Locale = string

packages/core/src/validation.ts

@@ -185,7 +185,11 @@ const initOptions = Joi.object({
     stream: Joi.function().required()
   }),
   connect: connectModalOptions,
-  containerElements: containerElements
+  containerElements: containerElements,
+  transactionPreview: Joi.object({
+    patchProvider: Joi.function().required(),
+    init: Joi.function().required()
+  })
 })
 
 const connectOptions = Joi.object({

packages/core/src/views/Index.svelte

@@ -394,6 +394,16 @@
   <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="transaction-preview-container"
+  />
+{/if}
+
 {#if displayAccountCenterNotifySameContainer}
   <div
     class="container flex flex-column fixed z-indexed"
@@ -417,6 +427,9 @@
         {/if}
       {/await}
     {/if}
+    {#if $accountCenter$.position.includes('bottom')}
+      <div id="transaction-preview-container" style="margin-bottom: 8px;"/>
+    {/if}
     <div
       style={!$accountCenter$.expanded &&
       $accountCenter$.minimal &&
@@ -427,13 +440,17 @@
           $accountCenter$.position.includes('Left')
         ? 'margin-right: auto'
         : ''}
+      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="transaction-preview-container" style="margin-top: 8px;"/>
+    {/if}
     {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile}
       {#await notifyComponent then Notify}
         {#if Notify}
@@ -459,6 +476,9 @@
       ? 'padding-top:0;'
       : ''} "
   >
+    {#if $accountCenter$.position.includes('bottom')}
+      <div id="transaction-preview-container" style="margin-bottom: 8px;"/>
+    {/if}
     <div
       style={!$accountCenter$.expanded &&
       $accountCenter$.minimal &&
@@ -478,6 +498,9 @@
         {/await}
       {/if}
     </div>
+    {#if $accountCenter$.position.includes('top')}
+      <div id="transaction-preview-container" style="margin-top: 8px;"/>
+    {/if}
   </div>
 {/if}
 {#if displayNotifySeparate}
@@ -491,6 +514,9 @@
       ? 'padding-top:0;'
       : ''} "
   >
+    {#if $notify$.position.includes('top')}
+      <div id="transaction-preview-container" />
+    {/if}
     {#await notifyComponent then Notify}
       {#if Notify}
         <svelte:component
@@ -501,5 +527,8 @@
         />
       {/if}
     {/await}
+    {#if $notify$.position.includes('bottom')}
+      <div id="transaction-preview-container" />
+    {/if}
   </div>
 {/if}

packages/core/src/views/connect/Index.svelte

@@ -17,7 +17,7 @@
   import SelectingWallet from './SelectingWallet.svelte'
   import Sidebar from './Sidebar.svelte'
   import { configuration } from '../../configuration.js'
-  import { getBlocknativeSdk } from '../../services.js'
+  import { getBNMulitChainSdk } from '../../services.js'
   import { BigNumber } from 'ethers'
 
   import {
@@ -211,7 +211,7 @@
       const chain = await getChainId(provider)
 
       if (state.get().notify.enabled) {
-        const sdk = await getBlocknativeSdk()
+        const sdk = await getBNMulitChainSdk()
 
         if (sdk) {
           try {

packages/dcent/src/index.ts

@@ -12,6 +12,7 @@ import type {
   Account,
   ScanAccountsOptions
 } from '@web3-onboard/hw-common'
+import { StaticJsonRpcProvider } from '@ethersproject/providers'
 
 interface CustomWindow extends Window {
   ethereum: EIP1193Provider
@@ -36,7 +37,7 @@ const assets = [
 
 const generateAccounts = async (
   keyring: any,
-  provider: providers.StaticJsonRpcProvider
+  provider: StaticJsonRpcProvider
 ): Promise<Account[]> => {
   const accounts = []
 
@@ -123,9 +124,7 @@ function dcent({
           currentChain =
             chains.find(({ id }: Chain) => id === chainId) || currentChain
 
-          const provider = new StaticJsonRpcProvider(
-            currentChain.rpcUrl
-          ) as providers.StaticJsonRpcProvider
+          const provider = new StaticJsonRpcProvider(currentChain.rpcUrl)
 
           return generateAccounts(dcentKeyring, provider)
         }