Skip to content

Commit

Permalink
add: polkadot selector lazy loading without session id
Browse files Browse the repository at this point in the history 
add: polkadot selector lazy loading without session id
  • Loading branch information
@LukassF
LukassF authored Feb 20, 2024
2 parents 3936eee + 9bcf216 commit bbff671
Show file tree
Hide file tree
Showing 18 changed files with 625 additions and 382 deletions.
2 changes: 1 addition & 1 deletion sdk/apps/modal-example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@nightlylabs/nightly-connect-sui": "0.0.29",
"@nightlylabs/wallet-selector-sui": "0.2.7",
"@nightlylabs/nightly-connect-polkadot": "0.0.14",
"@nightlylabs/wallet-selector-polkadot": "0.1.19",
"@nightlylabs/wallet-selector-polkadot": "0.2.0",
"@polkadot/extension-inject": "^0.46.5",
"@polkadot/api": "^10.10.1",
"@solana/web3.js": "^1.77.2",
Expand Down
9 changes: 5 additions & 4 deletions sdk/apps/modal-example/src/routes/aleph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,14 @@ export default function Polkadot() {
icon: 'https://docs.nightly.app/img/logo.png',
additionalInfo: 'Courtesy of Nightly Connect team'
},
network: 'AlephZero'
network: 'AlephZero',
persistent: true
},
true, // change this to false to test disabling eager connect
document.getElementById('modalAnchor')
{ initOnConnect: false, disableModal: false, disableEagerConnect: false }
)

adapter.canEagerConnect().then((canEagerConnect) => {
adapter.canEagerConnect().then((canEagerConnect: boolean) => {
console.log('canEagerConnect', canEagerConnect)
setEager(canEagerConnect)
})
setAdapter(adapter)
Expand Down
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;
}
}
79 changes: 67 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,62 @@ Loading.args = {
chainIcon: ChainIcon,
chainName: 'Solana',
relay: 'https://nc2.nightly.app'
}
}

export const Error: Story = (args: NightlyModalArgs) => {
const [{ timeoutError }, updateArgs] = useArgs()

if (!args.sessionId)
setTimeout(() => {
updateArgs({ timeoutError: true })
}, 5000)

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

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'
}
29 changes: 26 additions & 3 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 @@ -32,12 +32,18 @@ export class NightlyDesktopMain extends LitElement {
@property({ type: Object })
qrConfigOverride: Partial<XMLOptions> = {}

@property({ type: Boolean })
timeoutError = false

@state()
copyMessage = 'Copy'

@state()
qrSource: string | undefined = undefined

@state()
isSessionIdImmediatelyDefined: boolean = false

timeoutRef: number | undefined = undefined

onCopy = () => {
Expand Down Expand Up @@ -80,6 +86,7 @@ export class NightlyDesktopMain extends LitElement {
super.connectedCallback()

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

protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
Expand All @@ -106,17 +113,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
1 change: 1 addition & 0 deletions sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class NightlyMobileMain extends LitElement {
this._selectorItems = [...value].sort(walletsSort)

this.setItemsCount()
this.requestUpdate()
}

@state()
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 bbff671

Please sign in to comment.