Merge branch 'v2-web3-onboard-develop' of blocknative.github.com:blocknative/onboard into v2-web3-onboard-develop

Author: Adamj1232

README.md

@@ -12,17 +12,20 @@
 
 ## Quickstart
 
-Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:
+Install the core Onboard library, the injected wallets module and optionally ethers js to support browser extension and mobile wallets:
 
-`npm i @web3-onboard/core @web3-onboard/injected-wallets`
+**NPM**
+`npm i @web3-onboard/core @web3-onboard/injected-wallets ethers`
 
-- [@web3-onboard/core Official NPM Documentation](https://www.npmjs.com/package/@web3-onboard/core)
+**Yarn**
+`yarn add @web3-onboard/core @web3-onboard/injected-wallets ethers`
 
 Then initialize in your app:
 
 ```javascript
 import Onboard from '@web3-onboard/core'
 import injectedModule from '@web3-onboard/injected-wallets'
+import { ethers } from 'ethers'
 
 const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
 
@@ -37,17 +40,31 @@ const onboard = Onboard({
       label: 'Ethereum Mainnet',
       rpcUrl: MAINNET_RPC_URL
     }
-  ],
-  appMetadata: {
-    name: 'My App',
-    icon: '<SVG_ICON_STRING>',
-    description: 'My app using Onboard'
-  }
+  ]
 })
 
 const wallets = await onboard.connectWallet()
 
 console.log(wallets)
+
+if (wallets[0]) {
+  // create an ethers provider with the last connected wallet provider
+  const ethersProvider = new ethers.providers.Web3Provider(
+    wallets[0].provider,
+    'any'
+  )
+
+  const signer = ethersProvider.getSigner()
+
+  // send a transaction with the ethers provider
+  const txn = await signer.sendTransaction({
+    to: '0x',
+    value: 100000000000000
+  })
+
+  const receipt = await txn.wait()
+  console.log(receipt)
+}
 ```
 
 ## Documentation
@@ -64,22 +81,23 @@ For full documentation, check out the README.md for each package:
 
 **SDK Wallets**
 
-- [Fortmatic](packages/fortmatic/README.md)
+- [Coinbase](packages/coinbase/README.md)
+- [WalletConnect](packages/walletconnect/README.md)
 - [Gnosis](packages/gnosis/README.md)
-- [MEW](packages/mew/README.md)
+- [Magic](packages/magic/README.md)
+- [Fortmatic](packages/fortmatic/README.md)
 - [Portis](packages/portis/README.md)
-- [Torus](packages/torus/README.md)
-- [WalletConnect](packages/walletconnect/README.md)
-- [WalletLink](packages/walletlink/README.md)
-- Magic (in active development)
+- [MEW](packages/mew/README.md)
+- [Web3Auth](packages/web3auth/README.md)
 
 **Hardware Wallets**
 
-- [KeepKey](packages/keepkey/README.md)
 - [Ledger](packages/ledger/README.md)
 - [Trezor](packages/trezor/README.md)
 - [Keystone](packages/keystone/README.md)
+- [KeepKey](packages/keepkey/README.md)
 - [D'CENT](packages/dcent/README.md)
+
 **Frameworks**
 
 - [React](packages/react/README.md)

packages/core/README.md

@@ -17,6 +17,7 @@ Note:
 - MEW wallet currently fails to install on M1 macs
 - All wallet modules (except for `injected-wallets`) require extra dependencies and may require polyfilling the node built in modules for the browser. See the [Build Environments](#build-environments) section for more info
 - **If using React** you may be interested in checking out the React Hooks package here - https://www.npmjs.com/package/@web3-onboard/react
+- **If using Vue** you may be interested in checking out the Vue package here - https://www.npmjs.com/package/@web3-onboard/vue
 
 ## Initialization
 
@@ -147,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
@@ -158,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'>>
@@ -285,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: {
@@ -420,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