Skip to content

Commit 631d34d

Browse files
Adamj1232Adamj1232
authored
[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 (#1113)
* Moved notification stream up a level, positioning working as expected * working but needs cleanup * Handle placement and abstract logic into variables * Bump versions * Refine naming
1 parent 230e224 commit 631d34d

File tree

5 files changed

+78
-17
lines changed

5 files changed

+78
-17
lines changed

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.3.2-alpha.2",
3+
"version": "2.3.2-alpha.3",
44
"repository": "blocknative/web3-onboard",
55
"scripts": {
66
"build": "rollup -c",

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

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,61 @@
1717
const notify$ = state
1818
.select('notify')
1919
.pipe(startWith(state.get().notify), shareReplay(1))
20+
21+
const notifications$ = $notify$.enabled
22+
? state.select('notifications').pipe(startWith(state.get().notifications))
23+
: null
24+
2025
const positioningDefaults = {
2126
topLeft: 'top: 0; left: 0;',
2227
topRight: 'top: 0; right: 0;',
2328
bottomRight: 'bottom: 0; right: 0;',
2429
bottomLeft: 'bottom: 0; left: 0;'
2530
}
31+
32+
$: sharedContainer =
33+
$accountCenter$.enabled &&
34+
$notify$.enabled &&
35+
$notify$.position === $accountCenter$.position
36+
37+
$: samePositionMobile =
38+
device.type === 'mobile' || $accountCenter$.position === $notify$.position
39+
40+
$: sharedMobileContainerCheck =
41+
device.type === 'mobile' &&
42+
(($notify$.position.includes('bottom') &&
43+
$accountCenter$.position.includes('bottom')) ||
44+
($notify$.position.includes('top') &&
45+
$accountCenter$.position.includes('top')))
46+
47+
$: separateMobileContainerCheck =
48+
device.type === 'mobile' &&
49+
(($notify$.position.includes('top') &&
50+
$accountCenter$.position.includes('bottom')) ||
51+
($notify$.position.includes('bottom') &&
52+
$accountCenter$.position.includes('top')))
53+
54+
$: displayNotifySeparate =
55+
$notify$.enabled &&
56+
(!$accountCenter$.enabled ||
57+
($notify$.position !== $accountCenter$.position &&
58+
device.type !== 'mobile') ||
59+
separateMobileContainerCheck) &&
60+
$wallets$.length
61+
62+
$: displayAccountCenterSeparate =
63+
$accountCenter$.enabled &&
64+
(!$notify$.enabled ||
65+
($notify$.position !== $accountCenter$.position &&
66+
device.type !== 'mobile') ||
67+
separateMobileContainerCheck) &&
68+
$wallets$.length
69+
70+
$: displayAccountCenterNotifySameContainer =
71+
$notify$.enabled &&
72+
$accountCenter$.enabled &&
73+
$wallets$.length &&
74+
(sharedContainer || sharedMobileContainerCheck)
2675
</script>
2776

2877
<style>
@@ -280,7 +329,7 @@
280329
<SwitchChain />
281330
{/if}
282331

283-
{#if $notify$.enabled && $accountCenter$.enabled && $wallets$.length}
332+
{#if displayAccountCenterNotifySameContainer}
284333
<div
285334
class="container flex flex-column fixed z-indexed"
286335
style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
@@ -290,8 +339,12 @@
290339
? 'padding-top:0;'
291340
: ''} "
292341
>
293-
{#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)}
294-
<Notify position={$notify$.position} sharedContainer={true} />
342+
{#if $notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom') && samePositionMobile}
343+
<Notify
344+
notifications={$notifications$}
345+
position={$notify$.position}
346+
{sharedContainer}
347+
/>
295348
{/if}
296349
<div
297350
style={!$accountCenter$.expanded &&
@@ -306,12 +359,16 @@
306359
>
307360
<AccountCenter settings={$accountCenter$} />
308361
</div>
309-
{#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && (device.type === 'mobile' || $accountCenter$.position === $notify$.position)}
310-
<Notify position={$notify$.position} sharedContainer={true} />
362+
{#if $notify$.position.includes('top') && $accountCenter$.position.includes('top') && samePositionMobile}
363+
<Notify
364+
notifications={$notifications$}
365+
position={$notify$.position}
366+
{sharedContainer}
367+
/>
311368
{/if}
312369
</div>
313370
{/if}
314-
{#if $accountCenter$.enabled && (!$notify$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile')) && $wallets$.length}
371+
{#if displayAccountCenterSeparate}
315372
<div
316373
class="container flex flex-column fixed z-indexed"
317374
style="{positioningDefaults[$accountCenter$.position]}; {device.type ===
@@ -338,7 +395,7 @@
338395
</div>
339396
</div>
340397
{/if}
341-
{#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}
398+
{#if displayNotifySeparate}
342399
<div
343400
class="container flex flex-column fixed z-indexed"
344401
style="{positioningDefaults[$notify$.position]}; {device.type ===
@@ -348,6 +405,10 @@
348405
? 'padding-top:0;'
349406
: ''} "
350407
>
351-
<Notify position={$notify$.position} sharedContainer={false} />
408+
<Notify
409+
notifications={$notifications$}
410+
position={$notify$.position}
411+
{sharedContainer}
412+
/>
352413
</div>
353414
{/if}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { shareReplay, startWith } from 'rxjs/operators'
88
import Notification from './Notification.svelte'
99
import { configuration } from '../../configuration'
10+
import type { Notification as NotificationType } from '../../types'
1011
1112
const { device } = configuration
1213
@@ -16,6 +17,7 @@
1617
1718
export let position: string
1819
export let sharedContainer: boolean
20+
export let notifications: NotificationType[]
1921
2022
let x: number
2123
let y: number
@@ -36,8 +38,6 @@
3638
x = 0
3739
y = 0
3840
39-
const notifications$ = state.select('notifications').pipe(startWith([]))
40-
4141
let overflowY = 'y-scroll'
4242
const updateScrollYOnRemove = (): void => {
4343
if (overflowY !== 'y-visible') {
@@ -114,7 +114,7 @@
114114
}
115115
</style>
116116

117-
{#if $notifications$.length}
117+
{#if notifications.length}
118118
<ul
119119
class="bn-notify-{position} {overflowY}"
120120
style={`${
@@ -129,7 +129,7 @@
129129
: '24px'
130130
})`}
131131
>
132-
{#each $notifications$ as notification (notification.key)}
132+
{#each notifications as notification (notification.key)}
133133
<li
134134
animate:flip={{ duration: 500 }}
135135
on:click|stopPropagation

‎packages/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/react",
3-
"version": "2.2.2-alpha.1",
3+
"version": "2.2.2-alpha.2",
44
"description": "Collection of React Hooks for web3-onboard",
55
"repository": "blocknative/web3-onboard",
66
"module": "dist/index.js",
@@ -24,7 +24,7 @@
2424
"typescript": "^4.5.5"
2525
},
2626
"dependencies": {
27-
"@web3-onboard/core": "^2.3.2-alpha.2",
27+
"@web3-onboard/core": "^2.3.2-alpha.3",
2828
"@web3-onboard/common": "^2.1.4-alpha.1",
2929
"use-sync-external-store": "1.0.0"
3030
},

‎packages/vue/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/vue",
3-
"version": "2.1.2-alpha.1",
3+
"version": "2.1.2-alpha.2",
44
"description": "Vue Composable for web3-onboard",
55
"repository": "blocknative/web3-onboard",
66
"module": "dist/index.js",
@@ -25,7 +25,7 @@
2525
"@vueuse/core": "^8.4.2",
2626
"@vueuse/rxjs": "^8.2.0",
2727
"@web3-onboard/common": "^2.1.4-alpha.1",
28-
"@web3-onboard/core": "^2.3.2-alpha.2",
28+
"@web3-onboard/core": "^2.3.2-alpha.3",
2929
"vue-demi": "^0.12.4"
3030
},
3131
"peerDependencies": {

0 commit comments

Comments
 (0)