[core-v2.4.1-alpha.1, react-v2.2.4-alpha.1, vue-v2.1.4-alpha.1] : Update - Preflight notification updates(react hook, positioning variables, cleanup) (#1144)

* Add hook for preflight notifications, update types to break out txDetails, update transactionTypes to all preflight to hints per Gustavo
* Add independent positioning for notifications and account center through CSS variables
* return preflight errors to error notifications, remove network icon for them
* Remove unused type
* Add hook for PreFlight notifications
* Update import type
* Update docs
* Case conforming

Author: Adamj1232

packages/core/README.md

@@ -713,7 +713,7 @@ onboard.state.actions.updateAccountCenter({
 ```
 
 **`setPrimaryWallet`**
-The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is to be set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
+The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
 
 ```typescript
 // set the second wallet in the wallets array as the primary
@@ -792,6 +792,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
 
   /* CUSTOMIZE ACCOUNT CENTER*/
   --account-center-z-index
+  --account-center-position-top
+  --account-center-position-bottom
+  --account-center-position-right
+  --account-center-position-left
   --account-center-minimized-background
   --account-center-maximized-upper-background
   --account-center-maximized-network-section
@@ -925,7 +929,12 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --account-select-modal-margin-4: 1rem;
   --account-select-modal-margin-5: 0.5rem;
 
-  /* notify STYLES */
+  /* NOTIFY STYLES */
+  /* Notify Positioning variables only take effect if Notify is Positioned separate of Account Center */
+  --notify-onboard-container-position-top
+  --notify-onboard-container-position-bottom
+  --notify-onboard-container-position-right
+  --notify-onboard-container-position-left
   --notify-onboard-font-family-normal
   --notify-onboard-font-size-5
   --notify-onboard-gray-300

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0",
+  "version": "2.4.1-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",

packages/core/src/index.ts

@@ -61,7 +61,8 @@ export type {
   CustomNotification,
   Notification,
   Notify,
-  UpdateNotification
+  UpdateNotification,
+  PreflightNotificationsOptions
 } from './types'
 
 export type { EIP1193Provider } from '@web3-onboard/common'

packages/core/src/preflight-notifications.ts

@@ -63,8 +63,7 @@ export async function preflightNotifications(
     if (transactionCost.gt(new BigNumber(balance))) {
       const eventCode = 'nsfFail'
 
-      const newNotification = buildNotification(eventCode, id)
-      addNotification(newNotification)
+      addNotification(buildNotification(eventCode, id))
     }
   }
 
@@ -93,8 +92,7 @@ export async function preflightNotifications(
   }, reminderTimeout)
 
   const eventCode = 'txRequest'
-  const newNotification = buildNotification(eventCode, id)
-  addNotification(newNotification)
+  addNotification(buildNotification(eventCode, id))
 
   // if not provided with sendTransaction function,
   // resolve with transaction hash(or void) so dev can initiate transaction
@@ -112,8 +110,7 @@ export async function preflightNotifications(
     }
     const { eventCode, errorMsg } = extractMessageFromError(error as CatchError)
 
-    const newNotification = buildNotification(eventCode, id)
-    addNotification(newNotification)
+    addNotification(buildNotification(eventCode, id))
     console.error(errorMsg)
     return
   }

packages/core/src/types.ts

@@ -213,14 +213,16 @@ export interface PreflightNotificationsOptions {
   estimateGas?: () => Promise<string>
   gasPrice?: () => Promise<string>
   balance?: string | number
-  txDetails?: {
-    value: string | number
-    to?: string
-    from?: string
-  }
+  txDetails?: TxDetails
   txApproveReminderTimeout?: number
 }
 
+export interface TxDetails {
+  value: string | number
+  to?: string
+  from?: string
+}
+
 // ==== ACTIONS ==== //
 export type Action =
   | AddChainsAction

packages/core/src/views/Index.svelte

@@ -24,11 +24,23 @@
     .select('notifications')
     .pipe(startWith(state.get().notifications))
 
-  const positioningDefaults = {
-    topLeft: 'top: 0; left: 0;',
-    topRight: 'top: 0; right: 0;',
-    bottomRight: 'bottom: 0; right: 0;',
-    bottomLeft: 'bottom: 0; left: 0;'
+  const accountCenterPositioning = 'account-center'
+  const notifyPositioning = 'notify-onboard-container'
+  const setPositioningDefaults = (targetComponentVariable: string) => {
+    return {
+      topLeft: `
+        top: var(--${targetComponentVariable}-position-top, 0); 
+        left: var(--${targetComponentVariable}-position-left, 0);`,
+      topRight: `
+        top: var(--${targetComponentVariable}-position-top, 0); 
+        right: var(--${targetComponentVariable}-position-right, 0);`,
+      bottomRight: `
+        bottom: var(--${targetComponentVariable}-position-bottom, 0); 
+        right: var(--${targetComponentVariable}-position-right, 0);`,
+      bottomLeft: `
+        bottom: var(--${targetComponentVariable}-position-bottom, 0); 
+        left: var(--${targetComponentVariable}-position-left, 0);`
+    }
   }
 
   $: sharedContainer =
@@ -334,8 +346,9 @@
 {#if displayAccountCenterNotifySameContainer}
   <div
     class="container flex flex-column fixed z-indexed"
-    style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
-      'mobile' && $accountCenter$.position.includes('top')
+    style="{setPositioningDefaults(accountCenterPositioning)[
+      $accountCenter$.position
+    ]}; {device.type === 'mobile' && $accountCenter$.position.includes('top')
       ? 'padding-bottom: 0;'
       : device.type === 'mobile' && $accountCenter$.position.includes('bottom')
       ? 'padding-top:0;'
@@ -373,8 +386,9 @@
 {#if displayAccountCenterSeparate}
   <div
     class="container flex flex-column fixed z-indexed"
-    style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
-      'mobile' && $accountCenter$.position.includes('top')
+    style="{setPositioningDefaults(accountCenterPositioning)[
+      $accountCenter$.position
+    ]}; {device.type === 'mobile' && $accountCenter$.position.includes('top')
       ? 'padding-bottom: 0;'
       : device.type === 'mobile' && $accountCenter$.position.includes('bottom')
       ? 'padding-top:0;'
@@ -400,8 +414,9 @@
 {#if displayNotifySeparate}
   <div
     class="container flex flex-column fixed z-indexed"
-    style="{positioningDefaults[$notify$.position]}; {device.type ===
-      'mobile' && $notify$.position.includes('top')
+    style="{setPositioningDefaults(notifyPositioning)[
+      $notify$.position
+    ]}; {device.type === 'mobile' && $notify$.position.includes('top')
       ? 'padding-bottom: 0;'
       : device.type === 'mobile' && $notify$.position.includes('bottom')
       ? 'padding-top:0;'

packages/core/src/views/notify/NotificationContent.svelte

@@ -74,7 +74,7 @@
     {notification.message}
   </span>
 
-  {#if notification.id && (!notification.id.includes('customNotification') && !notification.id.includes('preflight') )}
+  {#if notification.id && !notification.id.includes('customNotification') && !notification.id.includes('preflight')}
     <span class="hash-time">
       {#if notification.link}
         <a

packages/demo/package.json

@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.0.8",
-    "@web3-onboard/core": "^2.4.0",
-    "@web3-onboard/dcent": "^2.0.6",
+    "@web3-onboard/core": "^2.4.1-alpha.1",
+    "@web3-onboard/dcent": "^2.0.5",
     "@web3-onboard/fortmatic": "^2.0.6",
     "@web3-onboard/gnosis": "^2.0.5",
     "@web3-onboard/injected-wallets": "^2.0.12",

packages/react/README.md

@@ -80,7 +80,8 @@ type UseConnectWallet = (): [
   (options: ConnectOptions) => Promise<void>,
   (wallet: DisconnectOptions) => Promise<void>,
   (addresses?: string[]) => Promise<void>,
-  (wallets: WalletInit[]) => void
+  (wallets: WalletInit[]) => void,
+  (wallet: WalletState, address?: string) => void
 ]
 
 type ConnectOptions = {
@@ -110,8 +111,25 @@ const [
   connect, // function to call to initiate user to connect wallet
   disconnect, // function to call with wallet<DisconnectOptions> to disconnect wallet
   updateBalances, // function to be called with an optional array of wallet addresses connected through Onboard to update balance or empty/no params to update all connected wallets
-  setWalletModules // function to be called with an array of wallet modules to conditionally allow connection of wallet types i.e. setWalletModules([ledger, trezor, injected])
+  setWalletModules, // function to be called with an array of wallet modules to conditionally allow connection of wallet types i.e. setWalletModules([ledger, trezor, injected])
+  setPrimaryWallet // function that can set the primary wallet and/or primary account within that wallet. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in
 ] = useConnectWallet()
+
+
+```
+**`setPrimaryWallet`**
+The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
+
+```typescript
+// set the second wallet in the wallets array as the primary
+setPrimaryWallet(wallets[1])
+
+// set the second wallet in the wallets array as the primary wallet
+// as well as setting the third account in that wallet as the primary account
+setPrimaryWallet(
+  wallets[1],
+  wallets[1].accounts[2].address
+)
 ```
 
 ## `useSetChain`
@@ -152,17 +170,17 @@ const [
 
 This hook allows the dev to access all notifications if enabled, send custom notifications and update notify <enable/disable & update transactionHandler function>
 **note** requires an API key be added to the initialization, enabled by default if API key exists
+For full Notification documentation please see [Notify section within the `@web3-onboard/core` docs](../core/README.md#options)
 
 ```typescript
-import { useNotifications } from '@web3-onboard/react'
-
 type UseNotifications = (): [
   Notification[],
   (updatedNotification: CustomNotification) => {
     dismiss: () => void
     update: UpdateNotification
   },
-  (update: Partial<Notify>) => void
+  (update: Partial<Notify>) => void,
+  (options: PreflightNotificationsOptions) => Promise<void | string>
 ]
 
 type Notification = {
@@ -209,18 +227,75 @@ type Notify = {
   transactionHandler: (
     event: EthereumTransactionData
   ) => TransactionHandlerReturn
+  /**
+   * Position of notifications that defaults to the same position as the
+   * Account Center (if enabled) of the top right if AC is disabled
+   * and notifications are enabled (enabled by default with API key)
+   */
+  position?: NotificationPosition
+}
+
+type PreflightNotificationsOptions = {
+  sendTransaction?: () => Promise<string | void>
+  estimateGas?: () => Promise<string>
+  gasPrice?: () => Promise<string>
+  balance?: string | number
+  txDetails?: TxDetails
+  txApproveReminderTimeout?: number
+}
+type TxDetails = {
+  value: string | number
+  to?: string
+  from?: string
+}
+```
+
+```typescript
+import { useNotifications } from '@web3-onboard/react'
 
 const [
   notifications, // the list of all notifications that update when notifications are added, updated or removed
   customNotification, // a function that takes a customNotification object and allows custom notifications to be shown to the user, returns an update and dismiss callback
-  updateNotify // a function that takes a Notify object to allow updating of the properties
+  updateNotify, // a function that takes a Notify object to allow updating of the properties
+  preflightNotifications // a function that takes a PreflightNotificationsOption to create preflight notifications
 ] = useNotifications()
 
 // View notifications as they come in if you would like to handle them independent of the notification display
 useEffect(() => {
   console.log(notifications)
 }, [notifications])
 
+const sendTransactionWithPreFlightNotifications = async () => {
+  const balanceValue = Object.values(wallet.accounts[0].balance)[0]
+
+  const signer = provider.getUncheckedSigner()
+
+  const txDetails = {
+    to: toAddress,
+    value: 1000000000000000
+  }
+
+  const sendTransaction = () => {
+    return signer.sendTransaction(txDetails).then(tx => tx.hash)
+  }
+
+  const gasPrice = () => provider.getGasPrice().then(res => res.toString())
+
+  const estimateGas = () => {
+    return provider.estimateGas(txDetails).then(res => res.toString())
+  }
+
+  const transactionHash =
+    await preflightNotifications({
+      sendTransaction,
+      gasPrice,
+      estimateGas,
+      balance: balanceValue,
+      txDetails: txDetails
+    })
+  console.log(transactionHash)
+}
+
 // Custom notification example
 <button
   className="bn-demo-button"
@@ -248,6 +323,14 @@ useEffect(() => {
 >
   Custom Hint Notification
 </button>
+<button
+  className="bn-demo-button"
+  onClick={async () => {
+    sendTransactionWithPreFlightNotifications()
+  }}
+>
+  Send with In Flight and Pre Flight Notifications
+</button>
 ```
 
 ## `useWallets`

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.3",
+  "version": "2.2.4-alpha.1",
   "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",
@@ -59,7 +59,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.4.0",
+    "@web3-onboard/core": "^2.4.1-alpha.1",
     "@web3-onboard/common": "^2.1.5",
     "use-sync-external-store": "1.0.0"
   },