[core-v2.3.0-alpha.1] : Feature - Transaction notifications

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

@@ -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 positions 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) and in turn 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 on screen 
+ - `Notification.link` - add link to hash 
+ - `Notification.onClick()` - notification body click event
+
+ Notify can also be completely styled by using the CSS variables found below. These are setup to allow for maximum customization with base styling variables setting to global the global more themed styling (i.e. `--onboard-grey-600`) as well as a more precise component level styling 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 and will be returned a `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.2",
+  "version": "2.3.0-alpha.3",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -42,12 +42,15 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.1.2-alpha.1",
+    "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>
+`

packages/core/src/icons/error.ts

@@ -0,0 +1,4 @@
+export default `<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666992 13.0002H15.3337L8.00033 0.333496L0.666992 13.0002ZM8.66699 11.0002H7.33366V9.66683H8.66699V11.0002ZM8.66699 8.3335H7.33366V5.66683H8.66699V8.3335Z" fill="#FFB3B3"/>
+</svg>
+`

packages/core/src/icons/hourglass.ts

@@ -0,0 +1,5 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0L0.0100002 6L4 10L0.0100002 14.01L0 20H12V14L8 10L12 6.01V0H0ZM10 14.5V18H2V14.5L6 10.5L10 14.5Z" fill="#929BED"/>
+</svg>
+`