Skip to content

Commit

Permalink
add: modal timeout error page and no loader when session id is immedi…
Browse files Browse the repository at this point in the history 
…ately defined
  • Loading branch information
@LukassF
LukassF committed Feb 20, 2024
1 parent 91a1173 commit a39f3a2
Show file tree
Hide file tree
Showing 6 changed files with 296 additions and 26 deletions.
59 changes: 59 additions & 0 deletions sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,52 @@
animation: fade_out_loader 250ms ease-out forwards;
}

.nc_desktopQrTimeoutErrorOverlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--nc-color-elements-2);
z-index: 5;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.nc_desktopQrTimeoutError {
width: 120px;
filter: grayscale(100%) opacity(60%);
}

.nc_desktopQrTimeoutErrorLabel {
margin-top: 15px;
margin-bottom: 5px;
font-size: 16px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0.02em;
text-align: center;
color: var(--nc-color-elements-7);
}

.nc_desktopQrTimeoutErrorLabelDescription {
color: var(--nc-color-elements-6);
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.02em;
text-align: center;
max-width: 40%;
}

.nc_desktopQrTimeoutErrorOverlayFadeIn {
visibility: visible;
animation: fade_in_error 250ms ease-out forwards;
}

@media (max-width: 1080px) {
.nc_desktopMainWrapper {
max-width: 636px;
Expand All @@ -111,6 +157,10 @@
width: 304px;
height: 304px;
}

.nc_desktopQrTimeoutErrorLabelDescription {
max-width: 60%;
}
}

@keyframes fade_out_loader {
Expand All @@ -122,3 +172,12 @@
display: none;
}
}

@keyframes fade_in_error {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
63 changes: 51 additions & 12 deletions sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@ import NightlyIcon from '../../static/svg/NightlyIcon.svg'
import ChainIcon from '../../static/svg/ChainIcon.svg'
import { useArgs } from '@storybook/client-api'


const meta = {
title: 'nightly-desktop-main',
parameters: {
layout: 'centered'
},
render: (args) => {

return html`<nightly-desktop-main
.selectorItems=${args.selectorItems}
.onWalletClick=${args.onWalletClick}
Expand All @@ -30,7 +28,6 @@ const meta = {
.sessionId=${args.sessionId}
.relay=${args.relay}
></nightly-desktop-main>`

}
} satisfies Meta<NightlyDesktopMain>

Expand Down Expand Up @@ -100,17 +97,17 @@ export const Loading: Story = (args: NightlyModalArgs) => {

if (!args.sessionId)
setTimeout(() => {
updateArgs({ sessionId: "1234" })
updateArgs({ sessionId: '1234' })
}, 2000)

return html`<nightly-desktop-main
.selectorItems=${args.selectorItems}
.onWalletClick=${args.onWalletClick}
.chainIcon=${args.chainIcon}
.chainName=${args.chainName}
.sessionId=${args.sessionId ?? sessionId}
.relay=${args.relay}
></nightly-desktop-main>`
.selectorItems=${args.selectorItems}
.onWalletClick=${args.onWalletClick}
.chainIcon=${args.chainIcon}
.chainName=${args.chainName}
.sessionId=${args.sessionId ?? sessionId}
.relay=${args.relay}
></nightly-desktop-main>`
}

Loading.args = {
Expand Down Expand Up @@ -150,4 +147,46 @@ Loading.args = {
chainIcon: ChainIcon,
chainName: 'Solana',
relay: 'https://nc2.nightly.app'
}
}

export const Error: Story = {
name: 'Error',
args: {
selectorItems: [
{ name: 'Phantom', icon: Phantom, status: 'recent' },
{ name: 'Nightly Wallet', icon: NightlyIcon, status: 'recent' },
{ name: 'MetaMask', icon: MetaMask, status: '' },
{ name: 'Glow', icon: Glow, status: '' },
{ name: 'ZenGO', icon: ZenGO, status: 'detected' },
{ name: 'Trust', icon: Trust, status: '' },
{ name: 'Binance', icon: Binance, status: '' },
{ name: 'Sollet', icon: Sollet, status: '' },
{ name: 'Phantom', icon: Phantom, status: '' },
{ name: 'MetaMask', icon: MetaMask, status: 'recent' },
{ name: 'Coinbase', icon: Coinbase, status: '' },
{ name: 'ZenGO', icon: ZenGO, status: '' },
{ name: 'Trust', icon: Trust, status: 'detected' },
{ name: 'Binance', icon: Binance, status: '' },
{ name: 'Phantom', icon: Phantom, status: 'recent' },
{ name: 'Nightly Wallet', icon: NightlyIcon, status: 'recent' },
{ name: 'MetaMask', icon: MetaMask, status: '' },
{ name: 'Glow', icon: Glow, status: '' },
{ name: 'ZenGO', icon: ZenGO, status: 'detected' },
{ name: 'Trust', icon: Trust, status: '' },
{ name: 'Binance', icon: Binance, status: '' },
{ name: 'Sollet', icon: Sollet, status: '' },
{ name: 'Phantom', icon: Phantom, status: '' },
{ name: 'MetaMask', icon: MetaMask, status: 'recent' },
{ name: 'Coinbase', icon: Coinbase, status: '' },
{ name: 'ZenGO', icon: ZenGO, status: '' },
{ name: 'Trust', icon: Trust, status: 'detected' },
{ name: 'Binance', icon: Binance, status: '' }
],
onWalletClick: (name: string) => {
console.log('Item clicked:', name)
},
chainIcon: ChainIcon,
chainName: 'Solana',
relay: 'https://nc2.nightly.app'
}
}
51 changes: 47 additions & 4 deletions sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,16 @@ export class NightlyDesktopMain extends LitElement {
@state()
qrSource: string | undefined = undefined

@state()
timeoutError: boolean = false

@state()
isSessionIdImmediatelyDefined: boolean = false

timeoutRef: number | undefined = undefined

loadingTimeout: number | undefined = undefined

onCopy = () => {
navigator.clipboard.writeText(
'nc:' +
Expand All @@ -57,7 +65,8 @@ export class NightlyDesktopMain extends LitElement {
}

private updateQrSource = () => {
if (this.sessionId)
if (this.sessionId) {
clearTimeout(this.loadingTimeout)
this.qrSource = svgToBase64(
generateQrCodeXml(
'nc:' +
Expand All @@ -74,12 +83,30 @@ export class NightlyDesktopMain extends LitElement {
}
)
)
}
}

connectedCallback(): void {
super.connectedCallback()

this.loadingTimeout = setTimeout(() => {
if (this.sessionId) clearTimeout(this.loadingTimeout)
// timeout error when sessionId takes longer than 5 seconds to arrive
else {
clearTimeout(this.loadingTimeout)
this.timeoutError = true
}
}, 5000) as unknown as number

this.updateQrSource()

if (this.sessionId) this.isSessionIdImmediatelyDefined = true
}

disconnectedCallback(): void {
super.disconnectedCallback()

clearTimeout(this.loadingTimeout)
}

protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
Expand All @@ -106,17 +133,33 @@ export class NightlyDesktopMain extends LitElement {
</div>
<img id="qrCode" class="nc_desktopMainQrCode" src=${this.qrSource} />
<div
class="nc_desktopQrLoaderOverlay ${this.qrSource
${!this.isSessionIdImmediatelyDefined &&
html`<div
class="nc_desktopQrLoaderOverlay ${this.qrSource && !this.timeoutError
? 'nc_desktopQrLoadedOverlayFadeOut'
: ''}"
>
<img
src="https://registry.nightly.app/images/fox_sad.gif"
src="https://registry.nightly.app/gifs/loading.gif"
alt="Loading"
class="nc_desktopQrLoader"
/>
<h3 class="nc_desktopQrLoaderLabel">Generating QR code...</h3>
</div>`}
<div
class="nc_desktopQrTimeoutErrorOverlay ${this.timeoutError &&
'nc_desktopQrTimeoutErrorOverlayFadeIn'}"
>
<img
src="https://registry.nightly.app/images/fox_sad.gif"
alt="Timeout error"
class="nc_desktopQrTimeoutError"
/>
<h3 class="nc_desktopQrTimeoutErrorLabel">QR code couldn’t be generated...</h3>
<p class="nc_desktopQrTimeoutErrorLabelDescription">
Make sure you have stable internet connection.
</p>
</div>
</div>
<nightly-wallet-selector-page
Expand Down
62 changes: 61 additions & 1 deletion sdk/packages/modal/src/components/nightly-mobile-qr/nightly-mobile-qr.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
background-image: var(--nc-img-back);
}

.nc_mobileQrBackButtonLoader {
.nc_mobileQrBackButtonLoader,
.nc_mobileQrBackButtonTimeoutError {
height: 32px;
width: 32px;
background-repeat: no-repeat;
Expand Down Expand Up @@ -81,6 +82,52 @@
animation: fade_out_loader 250ms ease-out forwards;
}

.nc_mobileQrTimeoutErrorOverlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--nc-color-elements-2);
z-index: 5;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.nc_mobileQrTimeoutError {
width: 120px;
filter: grayscale(100%) opacity(60%);
}

.nc_mobileQrTimeoutErrorLabel {
margin-top: 15px;
margin-bottom: 5px;
font-size: 16px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0.02em;
text-align: center;
color: var(--nc-color-elements-7);
}

.nc_mobileQrTimeoutErrorLabelDescription {
color: var(--nc-color-elements-6);
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.02em;
text-align: center;
max-width: 40%;
}

.nc_mobileQrTimeoutErrorOverlayFadeIn {
visibility: visible;
animation: fade_in_error 250ms ease-out forwards;
}

@media (max-width: 482px) {
.nc_mobileQrWrapper {
height: 420px;
Expand All @@ -90,6 +137,10 @@
width: 342px;
height: 342px;
}

.nc_mobileQrTimeoutErrorLabelDescription {
max-width: 65%;
}
}

@media (max-width: 374px) {
Expand All @@ -113,3 +164,12 @@
display: none;
}
}

@keyframes fade_in_error {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Loading

0 comments on commit a39f3a2

Please sign in to comment.