[core-v2.3.2-alpha.3 , react-v2.2.2-alpha.2, vue-v2.1.2-alpha.2] : Fix - Conditional rendering Notify and Account Center

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.3.2-alpha.2",
+  "version": "2.3.2-alpha.3",
   "repository": "blocknative/web3-onboard",
   "scripts": {
     "build": "rollup -c",

packages/core/src/views/Index.svelte

@@ -17,12 +17,61 @@
   const notify$ = state
     .select('notify')
     .pipe(startWith(state.get().notify), shareReplay(1))
+
+  const notifications$ = $notify$.enabled
+    ? state.select('notifications').pipe(startWith(state.get().notifications))
+    : null
+
   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
+
+  $: samePositionMobile =
+    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 +329,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 +339,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') && samePositionMobile}
+      <Notify
+        notifications={$notifications$}
+        position={$notify$.position}
+        {sharedContainer}
+      />
     {/if}
     <div
       style={!$accountCenter$.expanded &&
@@ -306,12 +359,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') && samePositionMobile}
+      <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 +395,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 +405,10 @@
       ? 'padding-top:0;'
       : ''} "
   >
-    <Notify position={$notify$.position} sharedContainer={false} />
+    <Notify
+      notifications={$notifications$}
+      position={$notify$.position}
+      {sharedContainer}
+    />
   </div>
 {/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

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.2-alpha.1",
+  "version": "2.2.2-alpha.2",
   "description": "Collection of React Hooks for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -24,7 +24,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.3.2-alpha.2",
+    "@web3-onboard/core": "^2.3.2-alpha.3",
     "@web3-onboard/common": "^2.1.4-alpha.1",
     "use-sync-external-store": "1.0.0"
   },

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.2-alpha.1",
+  "version": "2.1.2-alpha.2",
   "description": "Vue Composable for web3-onboard",
   "repository": "blocknative/web3-onboard",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.1.4-alpha.1",
-    "@web3-onboard/core": "^2.3.2-alpha.2",
+    "@web3-onboard/core": "^2.3.2-alpha.3",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {