add: polkadot selector lazy loading without session id

sdk/apps/modal-example/package.json

@@ -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",

sdk/apps/modal-example/src/routes/aleph.tsx

@@ -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)

sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.css

@@ -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;
@@ -111,6 +157,10 @@
     width: 304px;
     height: 304px;
   }
+
+  .nc_desktopQrTimeoutErrorLabelDescription {
+    max-width: 60%;
+  }
 }
 
 @keyframes fade_out_loader {
@@ -122,3 +172,12 @@
     display: none;
   }
 }
+
+@keyframes fade_in_error {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.stories.ts

@@ -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}
@@ -30,7 +28,6 @@ const meta = {
       .sessionId=${args.sessionId}
       .relay=${args.relay}
     ></nightly-desktop-main>`
-
   }
 } satisfies Meta<NightlyDesktopMain>
 
@@ -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 = {
@@ -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'
+}

sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.ts

@@ -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 = () => {
@@ -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 {
@@ -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

sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.ts

@@ -31,6 +31,7 @@ export class NightlyMobileMain extends LitElement {
     this._selectorItems = [...value].sort(walletsSort)
 
     this.setItemsCount()
+    this.requestUpdate()
   }
 
   @state()

sdk/packages/modal/src/components/nightly-mobile-qr/nightly-mobile-qr.css

@@ -19,7 +19,8 @@
   background-image: var(--nc-img-back);
 }
 
-.nc_mobileQrBackButtonLoader {
+.nc_mobileQrBackButtonLoader,
+.nc_mobileQrBackButtonTimeoutError {
   height: 32px;
   width: 32px;
   background-repeat: no-repeat;
@@ -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;
@@ -90,6 +137,10 @@
     width: 342px;
     height: 342px;
   }
+
+  .nc_mobileQrTimeoutErrorLabelDescription {
+    max-width: 65%;
+  }
 }
 
 @media (max-width: 374px) {
@@ -113,3 +164,12 @@
     display: none;
   }
 }
+
+@keyframes fade_in_error {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}