[core-v2.3.1-alpha.4, react-v2.2.1-alpha.4, vue-v2.1.1-alpha.3] : Update - Decouple Notify and AC positioning (#1098)

* Update react package version
* Setup and progress on decoupling - working with init functionality
* working with cleanup
* Update docs to handle new positioning and types
* Update versions
* fix validation
* Update container height on mobile, validation DRY

Author: Adamj1232

packages/core/README.md

@@ -148,7 +148,12 @@ unsubscribe()
 ```
 
 ```typescript
+
 export type NotifyOptions = {
+  desktop: Notify
+  mobile: Notify
+}
+export type Notify = {
   enabled: boolean // default: true
   /**
    * Callback that receives all transaction events
@@ -159,8 +164,15 @@ export type NotifyOptions = {
   transactionHandler?: (
     event: EthereumTransactionData
   ) => TransactionHandlerReturn
+  position: CommonPositions
 }
 
+export type CommonPositions =
+| 'topRight'
+| 'bottomRight'
+| 'bottomLeft'
+| 'topLeft'
+
 export type TransactionHandlerReturn = CustomNotification | boolean | void
 
 export type CustomNotification = Partial<Omit<Notification, 'id' | 'startTime'>>
@@ -286,15 +298,31 @@ const onboard = Onboard({
   },
   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',
+    desktop: {
+      enabled: true,
+      transactionHandler: transaction => {
+        console.log({ transaction })
+        if (transaction.eventCode === 'txPool') {
+          return {
+            type: 'success',
+            message: 'Your transaction from #1 DApp is in the mempool',
+          }
         }
-      }
+      },
+      position: 'bottomLeft'
+    },
+    mobile: {
+      enabled: true,
+      transactionHandler: transaction => {
+        console.log({ transaction })
+        if (transaction.eventCode === 'txPool') {
+          return {
+            type: 'success',
+            message: 'Your transaction from #1 DApp is in the mempool',
+          }
+        }
+      },
+      position: 'topRight'
     }
   },
   accountCenter: {
@@ -421,7 +449,7 @@ type AppState = {
   accountCenter: AccountCenter
   walletModules: WalletModule[]
   locale: Locale
-  notify: NotifyOptions
+  notify: Notify
   notifications: Notification[]
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.3.1-alpha.3",
+  "version": "2.3.1-alpha.4",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/constants.ts

@@ -13,7 +13,8 @@ export const APP_INITIAL_STATE: AppState = {
   },
   notify: {
     enabled: true,
-    transactionHandler: () => {}
+    transactionHandler: () => {},
+    position: 'topRight'
   },
   notifications: [],
   locale: ''

packages/core/src/index.ts

@@ -4,10 +4,10 @@ import disconnectWallet from './disconnect'
 import setChain from './chain'
 import { state } from './store'
 import { reset$ } from './streams'
-import { validateInitOptions } from './validation'
+import { validateInitOptions, validateNotify, validateNotifyOptions } from './validation'
 import initI18N from './i18n'
 import App from './views/Index.svelte'
-import type { InitOptions, OnboardAPI } from './types'
+import type { InitOptions, OnboardAPI, Notify } from './types'
 import { APP_INITIAL_STATE } from './constants'
 import { configuration, updateConfiguration } from './configuration'
 
@@ -22,7 +22,7 @@ import {
 
 import updateBalances from './updateBalances'
 
-const API = {
+const API: OnboardAPI = {
   connectWallet,
   disconnectWallet,
   setChain,
@@ -51,7 +51,7 @@ export type {
   AppState,
   CustomNotification,
   Notification,
-  NotifyOptions,
+  Notify,
   UpdateNotification
 } from './types'
 
@@ -104,7 +104,50 @@ function init(options: InitOptions): OnboardAPI {
 
   // update notify
   if (typeof notify !== undefined) {
-    updateNotify(notify)
+    if ('desktop' in notify || 'mobile' in notify) {
+      const error = validateNotifyOptions(notify)
+  
+      if (error) {
+        throw error
+      }
+  
+      if (
+        (!notify.desktop || (notify.desktop && !notify.desktop.position)) &&
+        accountCenter &&
+        accountCenter.desktop &&
+        accountCenter.desktop.position
+      ) {
+        notify.desktop.position = accountCenter.desktop.position
+      }
+      if (
+        (!notify.mobile || (notify.mobile && !notify.mobile.position)) &&
+        accountCenter &&
+        accountCenter.mobile &&
+        accountCenter.mobile.position
+      ) {
+        notify.mobile.position = accountCenter.mobile.position
+      }
+      let notifyUpdate: Partial<Notify>
+      if (device.type === 'mobile' && notify.mobile) {
+        notifyUpdate = {
+          ...APP_INITIAL_STATE.notify,
+          ...notify.mobile
+        }
+      } else if (notify.desktop) {
+        notifyUpdate = {
+          ...APP_INITIAL_STATE.notify,
+          ...notify.desktop
+        }
+      }
+      updateNotify(notifyUpdate)
+    } else {
+      const error = validateNotify(notify as Notify)
+  
+      if (error) {
+        throw error
+      }
+      updateNotify(notify as Notify)
+    }
   }
 
   if (svelteInstance) {

packages/core/src/store/actions.ts

@@ -16,15 +16,15 @@ import type {
   UpdateAccountCenterAction,
   UpdateWalletAction,
   WalletState,
-  NotifyOptions,
   UpdateNotifyAction,
   Notification,
   AddNotificationAction,
   RemoveNotificationAction,
   UpdateAllWalletsAction,
   CustomNotification,
   UpdateNotification,
-  CustomNotificationUpdate
+  CustomNotificationUpdate,
+  Notify
 } from '../types'
 
 import {
@@ -33,11 +33,11 @@ import {
   validateNotification,
   validateCustomNotification,
   validateCustomNotificationUpdate,
-  validateNotifyOptions,
   validateString,
   validateWallet,
   validateWalletInit,
-  validateUpdateBalances
+  validateUpdateBalances,
+  validateNotify
 } from '../validation'
 
 import {
@@ -156,8 +156,8 @@ export function updateAccountCenter(
   dispatch(action as UpdateAccountCenterAction)
 }
 
-export function updateNotify(update: Partial<NotifyOptions>): void {
-  const error = validateNotifyOptions(update)
+export function updateNotify(update: Partial<Notify>): void {
+  const error = validateNotify(update)
 
   if (error) {
     throw error

packages/core/src/types.ts

@@ -46,7 +46,7 @@ export interface InitOptions {
   /**
    * Transaction notification options
    */
-  notify?: Partial<NotifyOptions>
+  notify?: Partial<NotifyOptions> | Partial<Notify>
 }
 
 export interface OnboardAPI {
@@ -63,7 +63,7 @@ export interface OnboardAPI {
 interface ExposedActions {
   setWalletModules: (wallets: WalletInit[]) => void
   setLocale: (locale: string) => void
-  updateNotify: (update: Partial<NotifyOptions>) => void
+  updateNotify: (update: Partial<Notify>) => void
   customNotification: (
     updatedNotification: CustomNotification
   ) => {
@@ -141,7 +141,7 @@ export interface AppState {
   wallets: WalletState[]
   accountCenter: AccountCenter
   locale: Locale
-  notify: NotifyOptions
+  notify: Notify
   notifications: Notification[]
 }
 
@@ -156,11 +156,15 @@ export type Locale = string
 export type i18nOptions = Record<Locale, i18n>
 export type i18n = typeof en
 
-export type AccountCenterPosition =
-  | 'topRight'
-  | 'bottomRight'
-  | 'bottomLeft'
-  | 'topLeft'
+export type CommonPositions =
+| 'topRight'
+| 'bottomRight'
+| 'bottomLeft'
+| 'topLeft'
+
+export type AccountCenterPosition = CommonPositions
+
+export type NotificationPosition = CommonPositions
 
 export type AccountCenter = {
   enabled: boolean
@@ -174,7 +178,7 @@ export type AccountCenterOptions = {
   mobile: Omit<AccountCenter, 'expanded'>
 }
 
-export type NotifyOptions = {
+export type Notify = {
   /**
    * Defines whether whether to subscribe to transaction events or not
    * default: true
@@ -189,6 +193,17 @@ export type NotifyOptions = {
   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
+}
+
+export type NotifyOptions = {
+  desktop: Notify
+  mobile: Notify
 }
 
 export type Notification = {
@@ -279,7 +294,7 @@ export type SetLocaleAction = {
 
 export type UpdateNotifyAction = {
   type: 'update_notify'
-  payload: Partial<NotifyOptions>
+  payload: Partial<Notify>
 }
 
 export type AddNotificationAction = {

packages/core/src/validation.ts

@@ -17,7 +17,8 @@ import type {
   NotifyOptions,
   Notification,
   CustomNotification,
-  CustomNotificationUpdate
+  CustomNotificationUpdate,
+  Notify
 } from './types'
 
 const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
@@ -128,7 +129,7 @@ const walletInit = Joi.array().items(Joi.function()).required()
 
 const locale = Joi.string()
 
-const accountCenterPosition = Joi.string().valid(
+const commonPositions = Joi.string().valid(
   'topRight',
   'bottomRight',
   'bottomLeft',
@@ -137,7 +138,13 @@ const accountCenterPosition = Joi.string().valid(
 
 const notify = Joi.object({
   transactionHandler: Joi.function(),
-  enabled: Joi.boolean()
+  enabled: Joi.boolean(),
+  position: commonPositions
+})
+
+const notifyOptions = Joi.object({
+  desktop: notify,
+  mobile: notify
 })
 
 const initOptions = Joi.object({
@@ -150,15 +157,15 @@ const initOptions = Joi.object({
     desktop: Joi.object({
       enabled: Joi.boolean(),
       minimal: Joi.boolean(),
-      position: accountCenterPosition
+      position: commonPositions
     }),
     mobile: Joi.object({
       enabled: Joi.boolean(),
       minimal: Joi.boolean(),
-      position: accountCenterPosition
+      position: commonPositions
     })
   }),
-  notify
+  notify: [notifyOptions, notify]
 })
 
 const connectOptions = Joi.object({
@@ -183,7 +190,7 @@ const setChainOptions = Joi.object({
 
 const accountCenter = Joi.object({
   enabled: Joi.boolean(),
-  position: accountCenterPosition,
+  position: commonPositions,
   expanded: Joi.boolean(),
   minimal: Joi.boolean()
 })
@@ -287,10 +294,14 @@ export function validateLocale(data: string): ValidateReturn {
   return validate(locale, data)
 }
 
+export function validateNotify(data: Partial<Notify>): ValidateReturn {
+  return validate(notify, data)
+}
+
 export function validateNotifyOptions(
   data: Partial<NotifyOptions>
 ): ValidateReturn {
-  return validate(notify, data)
+  return validate(notifyOptions, data)
 }
 
 export function validateTransactionHandlerReturn(