[core-2.3.1-alpha.2 , react-2.2.1-alpha.2]: enhancement - account-center-z-index (#1091)

* account-center-z-index

* account-center-z-index

* account-center-z-index

* merge develop

* merge develop

Author: mahmud-bn

packages/core/README.md

@@ -121,20 +121,22 @@ type AccountCenterPosition =
 **`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. 
+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
+- `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
 
- If notifications are enabled the notifications can be handled through onboard app state as seen below.
- ```javascript
+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)
@@ -146,7 +148,7 @@ unsubscribe()
 
 ```typescript
 export type NotifyOptions = {
-  enabled: boolean  // default: true
+  enabled: boolean // default: true
   /**
    * Callback that receives all transaction events
    * Return a custom notification based on the event
@@ -177,7 +179,19 @@ export type Notification = {
 
 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 declare type Network =
+  | 'main'
+  | 'testnet'
+  | 'ropsten'
+  | 'rinkeby'
+  | 'goerli'
+  | 'kovan'
+  | 'xdai'
+  | 'bsc-main'
+  | 'matic-main'
+  | 'fantom-main'
+  | 'matic-mumbai'
+  | 'local'
 
 export interface UpdateNotification {
   (notificationObject: CustomNotification): {
@@ -187,28 +201,26 @@ export interface 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. 
- 
+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
-  )
+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
@@ -309,7 +321,7 @@ const onboard = Onboard({
         },
         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}" 
+          "txPool": "Your account is {verb} {formattedValue} {asset} {preposition} {counterpartyShortened}"
         }
       }
     },
@@ -618,6 +630,9 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --onboard-warning-600: #cc8c00;
   --onboard-warning-700: #664600;
 
+  /* CUSTOMIZE ACCOUNT CENTER STACK POSITIONING*/
+  --account-center-z-index
+
   /* CUSTOMIZE SECTIONS OF THE CONNECT MODAL */
   --onboard-connect-content-width
   --onboard-connect-content-height

packages/core/package.json

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

packages/core/src/views/Index.svelte

@@ -258,6 +258,10 @@
     touch-action: none;
   }
 
+  .z-indexed {
+    z-index: var(--account-center-z-index);
+  }
+
   @media all and (min-width: 428px) {
     .container {
       max-width: 348px;
@@ -279,7 +283,7 @@
 
 {#if ($notify$.enabled || $accountCenter$.enabled) && $wallets$.length}
   <div
-    class="container flex flex-column fixed"
+    class="container flex flex-column fixed z-indexed"
     style="{accountCenterPositions[$accountCenter$.position]}; {device.type ===
       'mobile' && $accountCenter$.position.includes('top')
       ? 'padding-bottom: 0;'

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.1-alpha.1",
+  "version": "2.2.1-alpha.2",
   "description": "Collection of React Hooks for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -23,7 +23,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.3.1-alpha.1",
+    "@web3-onboard/core": "^2.3.1-alpha.2",
     "@web3-onboard/common": "^2.1.3-alpha.1",
     "use-sync-external-store": "1.0.0"
   },