[core-v2.3.0-alpha.1] : Feature - Transaction notifications (#1070)

* Initial Notify setup steps
* Styling notification
* Styling getting closer
* Layout looking a lot better
* Animations working properly for pending
* Updated cleanliness
* Demo stuff
* Props passed in properly
* Rename and refactors
* Notify into AC
* Cleanup and merge in develop
* More cleanup and positioning
* Add css variables
* Fix and style timer
* More cleanup
* Updated structure and componentized further
* cleanup
* Add flags to denote v1 ref code
* Playing around with organization
* In progress
* Progress
* Progress
* Working notifications
* Latest SDK branch
* Add timeout to unsub calls
* Add timeout to disconnect
* Use NotifyEventStyles type
* Update comments
* Tidy up import statements
* Update docs
* Update versions
* Componentise notification
* Add margin to modal
* Remove network from customize notification
* Add hint and error types back
* Throw if invalid custom notification
* Upgrade sdk and handle unsupported network error
* Auto dismiss notification
* More README updates
* Update spacing and layout to display properly
* cleanup and more positioning
* Animations working
* Fix animation speed, linking in transaction hash
* Fix padding on AC
* Add text color to non-linking transaction hash
* More variablization and updating docs
* Add demo with updates for testing in the future
* Return the 4 second default dismiss to notifications, Fix margin causing view overflow in AC when switching chains
* Remove margin
* Update on hover to display close button, chain icon size, add close icon from mock, update margin
* Add new hint notification
* Update README for more info around notifications
* Revert dismiss timeout used for testing
* styling touchups
* Add DAPP notifications
* reset sizing for network select
* Working but needs cleanup
* Update action to return update and dismiss methods
* Update docs and remove unneeded type
* Cleanup of unneeded imports
* Updated styling of notifications for second round of style updates, removed status icon if not defined
* More styling of new info icon layout
* Update padding for info icon
* Handle replacement transactions
* Working on scrolling
* Update notification working
* Revert scroll on container breaking animations
* Updates SDK to version with multichain
* Always display close button on mobile notifications
* Fix scrolling
* Fix styling on notification container
* Handle newest notifications entering closest to AC despite location
* Updated styling of container to allow more space on mobile
* Update layout for single line notifications
* Updates to styling of hash/time container
* Update styling for new layout
* Working but animation updates coming
* Update layout for all animations to match mobile animations
* Removes unused de
* Update yarn and remove uuid from dep in core
* Remove 1rem buffer for animations
* Revert to 4 second dismiss
* Update types in action
* Add nanoId, update types for notification update method
* Update animations of removal
* Fix comment to reflect functionality
* Fix pending on safari
* Update packages/core/rollup.config.js
Co-authored-by: Aaron Barnard <abarnard@protonmail.com>
* Update packages/demo/src/App.svelte
Co-authored-by: Aaron Barnard <abarnard@protonmail.com>
* remove unused import
* merge in dev
* Update types and remove unneeded import
* Fix animation cutoff on end of list when removing an element
* Update readme
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/demo/src/App.svelte
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
Co-authored-by: Taylor Dawson <taylorjdawson@gmail.com>
* Update packages/core/README.md
* Fix styling and scroll direction when notifications are placed on bottom of screen
* Add latest packages to Core README
* Handle scroll container withaccount center expanded
* Update touch-events for scroll on mobile
Co-authored-by: Aaron Barnard <abarnard@protonmail.com>
Co-authored-by: Taylor Dawson <taylorjdwson@gmail.com?

Author: 3 people

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.2",
   "private": true,
   "workspaces": [
-    "./packages/*"
+    "packages/*"
   ],
   "scripts": {
     "install-m1-mac": "yarn install --ignore-optional",

packages/core/README.md

@@ -10,7 +10,7 @@ Install the core module:
 
 If you would like to support all wallets, then you can install all of the wallet modules:
 
-`npm i @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic`
+`npm i @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic @web3-onboard/dcent`
 
 Note:
 
@@ -29,6 +29,8 @@ type InitOptions {
   appMetadata?: AppMetadata
   i18n?: i18nOptions
   accountCenter?: AccountCenterOptions
+  apiKey?: string
+  notify?: Partial<NotifyOptions>
 }
 ```
 
@@ -116,6 +118,99 @@ type AccountCenterPosition =
   | 'topLeft'
 ```
 
+**`notify`**
+Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of an remaining transactions that may be in flight.
+By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled.
+An object that defines whether transaction notifications will display (defaults to true if an API key is provided). This object contains an `enabled` flag prop and an optional `transactionHandler` which is a callback that can disable or allow customizations of notifications. 
+Currently notifications are positioned in the same location as the account center (either below, if the Account Center is positioned along the top, or above if positioned on the bottom of the view).
+The `transactionHandler` can react off any property of the Ethereum TransactionData returned to the callback from the event (see console.log in example init). In turn, it can return a Custom `Notification` object to define the verbiage, styling, or add functionality:
+ - `Notification.message` - to completely customize the message shown 
+ - `Notification.eventCode` - handle codes in your own way - see codes here under the notify prop [default en file here](src/i18n/en.json)
+ - `Notification.type` - icon type displayed (see `NotificationType` below for options)
+ - `Notification.autoDismiss` - time (in ms) after which the notification will be dismissed. If set to `0` the notification will remain on screen until the user dismisses the notification, refreshes the page or navigates away from the site with the notifications 
+ - `Notification.link` - add link to the transaction hash. For instance, a link to the transaction on etherscan
+ - `Notification.onClick()` - onClick handler for when user clicks the notification element
+
+ Notify can also be styled by using the CSS variables found below. These are setup to allow maximum customization with base styling variables setting the global theme (i.e. `--onboard-grey-600`) along with more precise component level styling variables available (`--notify-onboard-grey-600`) with the latter taking precedent if defined
+
+ If notifications are enabled the notifications can be handled through onboard app state as seen below.
+ ```javascript
+const wallets = onboard.state.select('notifications')
+const { unsubscribe } = wallets.subscribe(update =>
+  console.log('transaction notifications: ', update)
+)
+
+// unsubscribe when updates are no longer needed
+unsubscribe()
+```
+
+```typescript
+export type NotifyOptions = {
+  enabled: boolean  // default: true
+  /**
+   * Callback that receives all transaction events
+   * Return a custom notification based on the event
+   * Or return false to disable notification for this event
+   * Or return undefined for a default notification
+   */
+  transactionHandler?: (
+    event: EthereumTransactionData
+  ) => TransactionHandlerReturn
+}
+
+export type TransactionHandlerReturn = CustomNotification | boolean | void
+
+export type CustomNotification = Partial<Omit<Notification, 'id' | 'startTime'>>
+
+export type Notification = {
+  id: string
+  key: string
+  type: NotificationType
+  network: Network
+  startTime?: number
+  eventCode: string
+  message: string
+  autoDismiss: number
+  link?: string
+  onclick?: (event: Event) => void
+}
+
+export type NotificationType = 'pending' | 'success' | 'error' | 'hint'
+
+export declare type Network = 'main' | 'testnet' | 'ropsten' | 'rinkeby' | 'goerli' | 'kovan' | 'xdai' | 'bsc-main' | 'matic-main' | 'fantom-main' | 'matic-mumbai' | 'local';
+
+export interface UpdateNotification {
+  (notificationObject: CustomNotification): {
+    dismiss: () => void
+    update: UpdateNotification
+  }
+}
+```
+
+Notify can be used to deliver custom DApp notifications by passing a `CustomNotification` object to the `customNotification` action. This will return an `UpdateNotification` type. 
+ This `UpdateNotification` will return an `update` function that can be passed a new `CustomNotification` to update the existing notification.
+ The `customNotification` method also returns a `dismiss` method that is called without any parameters to dismiss the notification. 
+ 
+```typescript
+  const { update, dismiss } =
+    onboard.state.actions.customNotification({
+      type: 'pending',
+      message:
+        'This is a custom DApp pending notification to use however you want',
+      autoDismiss: 0
+    })
+  setTimeout(
+    () =>
+      update({
+        eventCode: 'dbUpdateSuccess',
+        message: 'Updated status for custom notification',
+        type: 'success',
+        autoDismiss: 8000
+      }),
+    4000
+  )
+```
+
 ### Initialization Example
 
 Putting it all together, here is an example initialization with the injected wallet modules:
@@ -176,6 +271,19 @@ const onboard = Onboard({
       { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
     ]
   },
+  apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx'
+  notify: {
+    enabled: true,
+    transactionHandler: transaction => {
+      console.log({ transaction })
+      if (transaction.eventCode === 'txPool') {
+        return {
+          type: 'success',
+          message: 'Your transaction from #1 DApp is in the mempool',
+        }
+      }
+    }
+  },
   accountCenter: {
     desktop: {
       position: 'topRight',
@@ -194,6 +302,20 @@ const onboard = Onboard({
         selectingWallet: {
           header: 'custom text header'
         }
+      },
+      notify: {
+        transaction: {
+          txStuck: 'custom text for this notification event'
+        },
+        watched: {
+          // Any words in brackets can be re-ordered or removed to fit your dapps desired verbiage
+          "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}" 
+        }
+      }
+    },
+    es: {
+      transaction: {
+        txRequest: 'Su transacción está esperando que confirme'
       }
     }
   }
@@ -285,6 +407,9 @@ type AppState = {
   chains: Chain[]
   accountCenter: AccountCenter
   walletModules: WalletModule[]
+  locale: Locale
+  notify: NotifyOptions
+  notifications: Notification[]
 }
 
 type Chain {
@@ -605,6 +730,19 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   /* SPACING */
   --account-select-modal-margin-4: 1rem;
   --account-select-modal-margin-5: 0.5rem;
+
+  /* notify STYLES */
+  --notify-onboard-font-family-normal
+  --notify-onboard-font-size-5
+  --notify-onboard-gray-300
+  --notify-onboard-gray-600
+  --notify-onboard-border-radius
+  --notify-onboard-font-size-7
+  --notify-onboard-font-size-6
+  --notify-onboard-line-height-4
+  --notify-onboard-primary-100
+  --notify-onboard-primary-400
+  --notify-onboard-main-padding
 }
 ```
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.13-alpha.3",
+  "version": "2.3.0-alpha.1",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -42,12 +42,15 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.1.2-alpha.2",
+    "bignumber.js": "^9.0.0",
+    "bnc-sdk": "^4.4.0",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",
     "joi": "17.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.partition": "^4.6.0",
+    "nanoid": "^4.0.0",
     "rxjs": "^7.5.2",
     "svelte": "^3.46.4",
     "svelte-i18n": "^3.3.13"

packages/core/rollup.config.js

@@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace'
 import json from '@rollup/plugin-json'
 import sveltePreprocess from 'svelte-preprocess'
 import typescript from '@rollup/plugin-typescript'
-import copy from '@rollup-extras/plugin-copy';
+import copy from '@rollup-extras/plugin-copy'
 
 const production = !process.env.ROLLUP_WATCH
 
@@ -51,6 +51,9 @@ export default {
     'svelte/store',
     'lodash.merge',
     'lodash.partition',
-    'eventemitter3'
+    'eventemitter3',
+    'bignumber.js',
+    'bnc-sdk',
+    'nanoid'
   ]
 }

packages/core/src/configuration.ts

@@ -0,0 +1,13 @@
+import type { Configuration } from './types'
+import { getDevice } from './utils'
+
+export let configuration: Configuration = {
+  svelteInstance: null,
+  appMetadata: null,
+  apiKey: null,
+  device: getDevice()
+}
+
+export function updateConfiguration(update: Partial<Configuration>): void {
+  configuration = { ...configuration, ...update }
+}

packages/core/src/constants.ts

@@ -1,4 +1,4 @@
-import { internalState } from './internals'
+import { configuration } from './configuration'
 import type { AppState } from './types'
 
 export const APP_INITIAL_STATE: AppState = {
@@ -9,8 +9,13 @@ export const APP_INITIAL_STATE: AppState = {
     enabled: true,
     position: 'topRight',
     expanded: false,
-    minimal: internalState.device.type === 'mobile'
+    minimal: configuration.device.type === 'mobile'
   },
+  notify: {
+    enabled: true,
+    transactionHandler: () => {}
+  },
+  notifications: [],
   locale: ''
 }
 

packages/core/src/disconnect.ts

@@ -1,3 +1,4 @@
+import { getBlocknativeSdk } from './services'
 import { state } from './store'
 import { removeWallet } from './store/actions'
 import { disconnectWallet$ } from './streams'
@@ -12,6 +13,23 @@ async function disconnect(options: DisconnectOptions): Promise<WalletState[]> {
 
   const { label } = options
 
+  if (state.get().notify.enabled) {
+    // handle unwatching addresses
+    const sdk = await getBlocknativeSdk()
+
+    if (sdk) {
+      const wallet = state.get().wallets.find(wallet => wallet.label === label)
+
+      wallet.accounts.forEach(({ address }) => {
+        sdk.unsubscribe({
+          id: address,
+          chainId: wallet.chains[0].id,
+          timeout: 60000
+        })
+      })
+    }
+  }
+
   disconnectWallet$.next(label)
   removeWallet(label)
 

packages/core/src/i18n/en.json

@@ -71,5 +71,37 @@
     "addAccount": "Add Account",
     "setPrimaryAccount": "Set Primary Account",
     "disconnectWallet": "Disconnect Wallet"
+  },
+  "notify": {
+    "transaction": {
+      "txRequest": "Your transaction is waiting for you to confirm",
+      "nsfFail": "You have insufficient funds to complete this transaction",
+      "txUnderpriced": "The gas price for your transaction is too low, try again with a higher gas price",
+      "txRepeat": "This could be a repeat transaction",
+      "txAwaitingApproval": "You have a previous transaction waiting for you to confirm",
+      "txConfirmReminder": "Please confirm your transaction to continue, the transaction window may be behind your browser",
+      "txSendFail": "You rejected the transaction",
+      "txSent": "Your transaction has been sent to the network",
+      "txStallPending": "Your transaction has stalled and has not entered the transaction pool",
+      "txStuck": "Your transaction is stuck due to a nonce gap",
+      "txPool": "Your transaction has started",
+      "txStallConfirmed": "Your transaction has stalled and hasn't been confirmed",
+      "txSpeedUp": "Your transaction has been sped up",
+      "txCancel": "Your transaction is being canceled",
+      "txFailed": "Your transaction has failed",
+      "txConfirmed": "Your transaction has succeeded",
+      "txError": "Oops something went wrong, please try again"
+    },
+    "watched": {
+      "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}",
+      "txSpeedUp": "Transaction for {formattedValue} {asset} {preposition} {counterpartyShortened} has been sped up",
+      "txCancel": "Transaction for {formattedValue} {asset} {preposition} {counterpartyShortened} has been canceled",
+      "txConfirmed": "Your account successfully {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}",
+      "txFailed": "Your account failed to {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}"
+    },
+    "time": {
+      "minutes": "min",
+      "seconds": "sec"
+    }
   }
 }

packages/core/src/icons/checkmark.ts

@@ -0,0 +1,5 @@
+export default `
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.48076 8.10881L1.33076 4.95881L0.280762 6.00881L4.48076 10.2088L13.4808 1.20881L12.4308 0.158813L4.48076 8.10881Z" fill="#A4F4C6"/>
+</svg>
+`

packages/core/src/icons/close-circle.ts

@@ -0,0 +1,5 @@
+export default `
+<svg width="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>
+</svg>
+`