Release 2.3.0 - Main

.github/ISSUE_TEMPLATE/BUG.yml

@@ -41,26 +41,26 @@ body:
     attributes:
       label: What package is effected by this issue?
       options:
-        - @web3-onboard/core
-        - @web3-onboard/common
-        - @web3-onboard/coinbase
-        - @web3-onboard/decent
-        - @web3-onboard/formatic
-        - @web3-onboard/gnosis
-        - @web3-onboard/injected
-        - @web3-onboard/keepkey
-        - @web3-onboard/keystone
-        - @web3-onboard/ledger
-        - @web3-onboard/magic
-        - @web3-onboard/mew
-        - @web3-onboard/portis
-        - @web3-onboard/react
-        - @web3-onboard/torus
-        - @web3-onboard/trezor
-        - @web3-onboard/vue
-        - @web3-onboard/walletconnect
-        - @web3-onboard/walletlink
-        - @web3-onboard/web3auth
+        - "@web3-onboard/core"
+        - "@web3-onboard/common"
+        - "@web3-onboard/coinbase"
+        - "@web3-onboard/decent"
+        - "@web3-onboard/formatic"
+        - "@web3-onboard/gnosis"
+        - "@web3-onboard/injected"
+        - "@web3-onboard/keepkey"
+        - "@web3-onboard/keystone"
+        - "@web3-onboard/ledger"
+        - "@web3-onboard/magic"
+        - "@web3-onboard/mew"
+        - "@web3-onboard/portis"
+        - "@web3-onboard/react"
+        - "@web3-onboard/torus"
+        - "@web3-onboard/trezor"
+        - "@web3-onboard/vue"
+        - "@web3-onboard/walletconnect"
+        - "@web3-onboard/walletlink"
+        - "@web3-onboard/web3auth"
         - bnc-onboard (v1)
     validations:
       required: true

README.md

@@ -1,4 +1,5 @@
 # Web3-Onboard
+**easy way to connect users to dapps**
 
 ## Features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "workspaces": [
     "./packages/*"

packages/coinbase/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Coinbase Wallet module for web3-onboard",
+  "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
   "main": "dist/index.js",
@@ -21,6 +22,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.0.5",
-    "@web3-onboard/common": "^2.1.3"
+    "@web3-onboard/common": "^2.1.4"
   }
 }

packages/common/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.3",
+  "version": "2.1.4",
+  "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.3.1",
+  "version": "2.3.2",
+  "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -41,7 +42,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.1.3",
+    "@web3-onboard/common": "^2.1.4",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.4.1",
     "bowser": "^2.11.0",

packages/core/src/index.ts

@@ -4,7 +4,11 @@ import disconnectWallet from './disconnect'
 import setChain from './chain'
 import { state } from './store'
 import { reset$ } from './streams'
-import { validateInitOptions, validateNotify, validateNotifyOptions } from './validation'
+import {
+  validateInitOptions,
+  validateNotify,
+  validateNotifyOptions
+} from './validation'
 import initI18N from './i18n'
 import App from './views/Index.svelte'
 import type { InitOptions, OnboardAPI, Notify } from './types'
@@ -103,14 +107,14 @@ function init(options: InitOptions): OnboardAPI {
   }
 
   // update notify
-  if (typeof notify !== undefined) {
+  if (typeof notify !== 'undefined') {
     if ('desktop' in notify || 'mobile' in notify) {
       const error = validateNotifyOptions(notify)
-  
+
       if (error) {
         throw error
       }
-  
+
       if (
         (!notify.desktop || (notify.desktop && !notify.desktop.position)) &&
         accountCenter &&
@@ -128,6 +132,7 @@ function init(options: InitOptions): OnboardAPI {
         notify.mobile.position = accountCenter.mobile.position
       }
       let notifyUpdate: Partial<Notify>
+
       if (device.type === 'mobile' && notify.mobile) {
         notifyUpdate = {
           ...APP_INITIAL_STATE.notify,
@@ -139,15 +144,34 @@ function init(options: InitOptions): OnboardAPI {
           ...notify.desktop
         }
       }
+      if (!apiKey || !notifyUpdate.enabled) {
+        notifyUpdate.enabled = false
+      }
       updateNotify(notifyUpdate)
     } else {
       const error = validateNotify(notify as Notify)
-  
+
       if (error) {
         throw error
       }
-      updateNotify(notify as Notify)
+      const notifyUpdate: Partial<Notify> = {
+        ...APP_INITIAL_STATE.notify,
+        ...notify
+      }
+
+      if (!apiKey || !notifyUpdate.enabled) {
+        notifyUpdate.enabled = false
+      }
+      console.log(notifyUpdate)
+      updateNotify(notifyUpdate)
+    }
+  } else {
+    const notifyUpdate: Partial<Notify> = APP_INITIAL_STATE.notify
+
+    if (!apiKey) {
+      notifyUpdate.enabled = false
     }
+    updateNotify(notifyUpdate)
   }
 
   if (svelteInstance) {

packages/core/src/views/Index.svelte

@@ -8,6 +8,8 @@
   import AccountCenter from './account-center/Index.svelte'
   import Notify from './notify/Index.svelte'
   import { configuration } from '../configuration'
+  import type { Observable } from 'rxjs'
+  import type { Notification } from '../types'
 
   const { device } = configuration
   const accountCenter$ = state
@@ -17,12 +19,61 @@
   const notify$ = state
     .select('notify')
     .pipe(startWith(state.get().notify), shareReplay(1))
+
+  const notifications$: Observable<Notification[]> = state
+    .select('notifications')
+    .pipe(startWith(state.get().notifications))
+
   const positioningDefaults = {
     topLeft: 'top: 0; left: 0;',
     topRight: 'top: 0; right: 0;',
     bottomRight: 'bottom: 0; right: 0;',
     bottomLeft: 'bottom: 0; left: 0;'
   }
+
+  $: sharedContainer =
+    $accountCenter$.enabled &&
+    $notify$.enabled &&
+    $notify$.position === $accountCenter$.position
+
+  $: samePositionOrMobile =
+    device.type === 'mobile' || $accountCenter$.position === $notify$.position
+
+  $: sharedMobileContainerCheck =
+    device.type === 'mobile' &&
+    (($notify$.position.includes('bottom') &&
+      $accountCenter$.position.includes('bottom')) ||
+      ($notify$.position.includes('top') &&
+        $accountCenter$.position.includes('top')))
+
+  $: separateMobileContainerCheck =
+    device.type === 'mobile' &&
+    (($notify$.position.includes('top') &&
+      $accountCenter$.position.includes('bottom')) ||
+      ($notify$.position.includes('bottom') &&
+        $accountCenter$.position.includes('top')))
+
+  $: displayNotifySeparate =
+    $notify$.enabled &&
+    (!$accountCenter$.enabled ||
+      ($notify$.position !== $accountCenter$.position &&
+        device.type !== 'mobile') ||
+      separateMobileContainerCheck) &&
+    $wallets$.length
+
+  $: displayAccountCenterSeparate =
+    $accountCenter$.enabled &&
+    (!$notify$.enabled ||
+      ($notify$.position !== $accountCenter$.position &&
+        device.type !== 'mobile') ||
+      separateMobileContainerCheck) &&
+    $wallets$.length
+
+  $: displayAccountCenterNotifySameContainer =
+    $notify$.enabled &&
+    $accountCenter$.enabled &&
+    $wallets$.length &&
+    (sharedContainer || sharedMobileContainerCheck)
 </script>
 
 <style>
@@ -280,7 +331,7 @@
   <SwitchChain />
 {/if}
 
-{#if $notify$.enabled && $accountCenter$.enabled && $wallets$.length}
+{#if displayAccountCenterNotifySameContainer}
   <div
     class="container flex flex-column fixed z-indexed"
     style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
@@ -290,8 +341,12 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)}
-      <Notify position={$notify$.position} sharedContainer={true} />
+    {#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && samePositionOrMobile}
+      <Notify
+        notifications={$notifications$}
+        position={$notify$.position}
+        {sharedContainer}
+      />
     {/if}
     <div
       style={!$accountCenter$.expanded &&
@@ -306,12 +361,16 @@
     >
       <AccountCenter settings={$accountCenter$} />
     </div>
-    {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)}
-      <Notify position={$notify$.position} sharedContainer={true} />
+    {#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionOrMobile}
+      <Notify
+        notifications={$notifications$}
+        position={$notify$.position}
+        {sharedContainer}
+      />
     {/if}
   </div>
 {/if}
-{#if $accountCenter$.enabled && (!$notify$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile')) && $wallets$.length}
+{#if displayAccountCenterSeparate}
   <div
     class="container flex flex-column fixed z-indexed"
     style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
@@ -338,7 +397,7 @@
     </div>
   </div>
 {/if}
-{#if $notify$.enabled && (!$accountCenter$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile') || ($notify$.position.includes('top') && $accountCenter$.position.includes('bottom')) || ($notify$.position.includes('bottom') && $accountCenter$.position.includes('top'))) && $wallets$.length}
+{#if displayNotifySeparate}
   <div
     class="container flex flex-column fixed z-indexed"
     style="{positioningDefaults[$notify$.position]}; {device.type ===
@@ -348,6 +407,10 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    <Notify position={$notify$.position} sharedContainer={false} />
+    <Notify
+      notifications={$notifications$}
+      position={$notify$.position}
+      {sharedContainer}
+    />
   </div>
 {/if}

packages/core/src/views/connect/Index.svelte

@@ -52,7 +52,7 @@
   let scrollContainer: HTMLElement
 
   let walletToAutoSelect =
-    autoSelect &&
+    autoSelect.label &&
     walletModules.find(
       ({ label }) => label.toLowerCase() === autoSelect.label.toLowerCase()
     )
@@ -209,7 +209,7 @@
       // user rejected account access
       if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_REJECTED) {
         connectionRejected = true
-        if (autoSelect) {
+        if (walletToAutoSelect) {
           walletToAutoSelect = null
 
           if (autoSelect.disableModals) {
@@ -360,7 +360,7 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-{#if !autoSelect || (autoSelect && !autoSelect.disableModals)}
+{#if !autoSelect.disableModals}
   <Modal {close}>
     <div class="container relative flex">
       {#if windowWidth >= 809}
@@ -396,7 +396,7 @@
                   {connectingErrorMessage}
                 />
               </div>
-            {:else if !autoSelect}
+            {:else}
               <InstallWallet />
             {/if}
           {/if}

packages/core/src/views/notify/Index.svelte

@@ -7,6 +7,7 @@
   import { shareReplay, startWith } from 'rxjs/operators'
   import Notification from './Notification.svelte'
   import { configuration } from '../../configuration'
+  import type { Notification as NotificationType } from '../../types'
 
   const { device } = configuration
 
@@ -16,6 +17,7 @@
 
   export let position: string
   export let sharedContainer: boolean
+  export let notifications: NotificationType[]
 
   let x: number
   let y: number
@@ -36,8 +38,6 @@
   x = 0
   y = 0
 
-  const notifications$ = state.select('notifications').pipe(startWith([]))
-
   let overflowY = 'y-scroll'
   const updateScrollYOnRemove = (): void => {
     if (overflowY !== 'y-visible') {
@@ -114,7 +114,7 @@
   }
 </style>
 
-{#if $notifications$.length}
+{#if notifications.length}
   <ul
     class="bn-notify-{position} {overflowY}"
     style={`${
@@ -129,7 +129,7 @@
         : '24px'
     })`}
   >
-    {#each $notifications$ as notification (notification.key)}
+    {#each notifications as notification (notification.key)}
       <li
         animate:flip={{ duration: 500 }}
         on:click|stopPropagation