add: lazy loading modal solana selector

sdk/apps/modal-example/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@mysten/sui.js": "^0.42.0",
     "@mysten/wallet-adapter-wallet-standard": "^0.8.0",
-    "@nightlylabs/wallet-selector-solana": "0.2.7",
+    "@nightlylabs/wallet-selector-solana": "0.3.0",
     "@nightlylabs/nightly-connect-solana": "0.0.29",
     "@nightlylabs/nightly-connect-sui": "0.0.29",
     "@nightlylabs/wallet-selector-sui": "0.2.7",
@@ -38,4 +38,4 @@
   "engines": {
     "node": ">=16.8"
   }
-}
+}

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

@@ -29,7 +29,6 @@ export default function Polkadot() {
     )
 
     adapter.canEagerConnect().then((canEagerConnect: boolean) => {
-      console.log('canEagerConnect', canEagerConnect)
       setEager(canEagerConnect)
     })
     setAdapter(adapter)

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

@@ -29,7 +29,7 @@ export default function Polkadot() {
         },
         network: 'AlephZero'
       },
-      true, // change this to false to test disabling eager connect
+      {}, // change this to false to test disabling eager connect
       document.getElementById('modalAnchor'),
       {
         variablesOverride: {

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

@@ -13,7 +13,7 @@ export default function Polkadot() {
   const provider = new WsProvider('wss://ws.test.azero.dev/')
 
   onMount(async () => {
-    const adapter = NightlyConnectAdapter.buildWithInitOnConnect(
+    const adapter = NightlyConnectAdapter.buildLazy(
       {
         appMetadata: {
           name: 'NC TEST AlephZero',
@@ -23,7 +23,7 @@ export default function Polkadot() {
         },
         network: 'AlephZero'
       },
-      true, // change this to false to test disabling eager connect
+      { initOnConnect: true }, // change this to false to test disabling eager connect
       document.getElementById('modalAnchor')
     )
 

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

@@ -20,7 +20,7 @@ export default function Solana() {
           additionalInfo: 'Courtesy of Nightly Connect team'
         }
       },
-      true,
+      {},
       document.getElementById('modalAnchor')
     ).then((adapter) => {
       adapter.on('connect', (pk) => {

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

@@ -10,7 +10,7 @@ export default function SolanaLazy() {
   const [adapter, setAdapter] = createSignal<NightlyConnectAdapter>()
   const [publicKey, setPublicKey] = createSignal<PublicKey>()
   onMount(() => {
-    const adapter = NightlyConnectAdapter.buildWithInitOnConnect(
+    const adapter = NightlyConnectAdapter.buildLazy(
       {
         appMetadata: {
           name: 'NCTestSolana',
@@ -20,7 +20,7 @@ export default function SolanaLazy() {
         },
         url: 'https://nc2.nightly.app'
       },
-      true,
+      { initOnConnect: true },
       document.getElementById('modalAnchor')
     )
 

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

@@ -21,7 +21,7 @@ export default function SolanaLazy() {
         },
         url: 'https://nc2.nightly.app'
       },
-      true,
+      {},
       document.getElementById('modalAnchor')
     )
 

sdk/packages/selector-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nightlylabs/wallet-selector-base",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "",
   "type": "module",
   "exports": {
@@ -39,4 +39,4 @@
     "tslib": "^2.5.3",
     "typescript": "^5.1.3"
   }
-}
+}

sdk/packages/selector-base/src/detection.ts

@@ -1,8 +1,8 @@
 import { Wallet, getWallets } from '@wallet-standard/core'
-import { type IWalletListItem, type MetadataWallet } from './types'
+import { WalletMetadata, type IWalletListItem, type MetadataWallet } from './types'
 
 export const getWalletsList = (
-  presetList: MetadataWallet[],
+  presetList: WalletMetadata[],
   walletsFilterCb: (wallet: Wallet) => boolean,
   recentWalletName?: string
 ) => {

sdk/packages/selector-base/src/modal.ts

@@ -1,4 +1,8 @@
-import { type XMLOptions, type NightlySelector } from '@nightlylabs/wallet-selector-modal'
+import {
+  type XMLOptions,
+  type NightlySelector,
+  WalletSelectorItem
+} from '@nightlylabs/wallet-selector-modal'
 import { type IWalletListItem, type NetworkData } from './types'
 import { isMobileBrowser } from './utils'
 
@@ -41,7 +45,11 @@ export class NightlyConnectSelectorModal {
     )
     this._walletsList = filtered
     if (this._modal) {
-      this._modal.selectorItems = filtered
+      this._modal.selectorItems = filtered.map((item) => ({
+        ...item,
+        icon: item.image.default,
+        link: item.homepage
+      })) as WalletSelectorItem[]
     }
   }
 
@@ -61,7 +69,11 @@ export class NightlyConnectSelectorModal {
       this._modal.relay = this._relay
       this._modal.chainIcon = this._networkData.icon
       this._modal.chainName = this._networkData.name
-      this._modal.selectorItems = this.walletsList
+      this._modal.selectorItems = this.walletsList.map((item) => ({
+        ...item,
+        icon: item.image.default,
+        link: item.homepage
+      })) as WalletSelectorItem[]
     })
   }
 

sdk/packages/selector-base/src/types.ts

@@ -17,7 +17,49 @@ export interface MetadataWallet {
   walletType: WalletType
 }
 
-export interface IWalletListItem extends MetadataWallet {
+interface Images {
+  default: string
+  sm: string
+  md: string
+  lg: string
+}
+
+type Network = string
+
+type Platform =
+  | 'browser'
+  | 'ios'
+  | 'android'
+  | 'macos'
+  | 'windows'
+  | 'linux'
+  | 'chrome'
+  | 'firefox'
+  | 'opera'
+  | 'edge'
+  | 'brave'
+  | 'safari'
+  | 'other'
+
+type Version = string
+
+export interface WalletMetadata {
+  slug: string
+  name: string
+  description?: string
+  homepage?: string
+  chains?: Array<Network>
+  version?: Version
+  walletType: WalletType
+  mobile: Deeplink | null
+  desktop: Deeplink | null
+  image: Images
+  app?: Record<Platform, string>
+  injectPath?: Record<Network, string>
+  lastUpdatedTimestamp?: bigint
+}
+
+export interface IWalletListItem extends WalletMetadata {
   recent?: boolean
   detected?: boolean
   standardWallet?: Wallet

sdk/packages/selector-polkadot/package.json

@@ -25,7 +25,7 @@
   "license": "ISC",
   "dependencies": {
     "@nightlylabs/nightly-connect-polkadot": "^0.0.15",
-    "@nightlylabs/wallet-selector-base": "^0.3.0",
+    "@nightlylabs/wallet-selector-base": "^0.3.1",
     "@polkadot/extension-inject": "0.46.5",
     "@polkadot/api": "10.10.1",
     "@wallet-standard/core": "^1.0.3"
@@ -40,4 +40,4 @@
     "tslib": "^2.5.3",
     "typescript": "^5.1.3"
   }
-}
+}

sdk/packages/selector-polkadot/src/adapter.ts

@@ -7,6 +7,7 @@ import {
 import {
   ConnectionOptions,
   ConnectionType,
+  IWalletListItem,
   NightlyConnectSelectorModal,
   XMLOptions,
   clearRecentWalletForNetwork,
@@ -112,7 +113,7 @@ export class NightlyConnectAdapter implements Injected {
   set walletsList(list: IPolkadotWalletListItem[]) {
     this._walletsList = list
     if (this._modal) {
-      this._modal.walletsList = list
+      this._modal.walletsList = list as IWalletListItem[]
     }
   }
 
@@ -155,7 +156,7 @@ export class NightlyConnectAdapter implements Injected {
     )
     if (!adapter._connectionOptions.disableModal) {
       adapter._modal = new NightlyConnectSelectorModal(
-        adapter.walletsList,
+        adapter.walletsList as IWalletListItem[],
         appInitData.url ?? 'https://nc2.nightly.app',
         networkToData(adapter.network),
         anchorRef,
@@ -204,7 +205,7 @@ export class NightlyConnectAdapter implements Injected {
 
     if (!adapter._connectionOptions.disableModal) {
       adapter._modal = new NightlyConnectSelectorModal(
-        adapter.walletsList,
+        adapter.walletsList as IWalletListItem[],
         appInitData.url ?? 'https://nc2.nightly.app',
         networkToData(adapter.network),
         anchorRef,
@@ -301,47 +302,47 @@ export class NightlyConnectAdapter implements Injected {
         throw new Error('Wallet not found')
       }
 
-      if (wallet.deeplink === null) {
+      if (wallet.mobile === null) {
         throw new Error('Deeplink not found')
       }
 
       // If we have a native deeplink, we should use it
-      if (wallet.deeplink.native !== null) {
+      if (wallet.mobile.native !== null) {
         this._app.connectDeeplink({
           walletName: wallet.name,
-          url: wallet.deeplink.native
+          url: wallet.mobile.native
         })
 
         this._chosenMobileWalletName = walletName
 
         triggerConnect(
-          wallet.deeplink.native,
+          wallet.mobile.native,
           this._app.sessionId,
           this._appInitData.url ?? 'https://nc2.nightly.app'
         )
         return
       }
 
       // If we have a universal deeplink, we should use it
-      if (wallet.deeplink.universal !== null) {
+      if (wallet.mobile.universal !== null) {
         this._app.connectDeeplink({
           walletName: wallet.name,
-          url: wallet.deeplink.universal
+          url: wallet.mobile.universal
         })
 
         this._chosenMobileWalletName = walletName
 
         triggerConnect(
-          wallet.deeplink.universal,
+          wallet.mobile.universal,
           this._app.sessionId,
           this._appInitData.url ?? 'https://nc2.nightly.app'
         )
         return
       }
       // Fallback to redirecting to app browser
       // aka browser inside the app
-      if (!wallet.deeplink.redirectToAppBrowser) {
-        const redirectToAppBrowser = wallet.deeplink.redirectToAppBrowser
+      if (!wallet.mobile.redirectToAppBrowser) {
+        const redirectToAppBrowser = wallet.mobile.redirectToAppBrowser
         if (redirectToAppBrowser !== null && redirectToAppBrowser.indexOf('{{url}}') > -1) {
           const url = redirectToAppBrowser.replace(
             '{{url}}',
@@ -581,7 +582,7 @@ export class NightlyConnectAdapter implements Injected {
         getRecentWalletForNetwork(this.network)?.walletName ?? undefined
       )
       if (this._modal) {
-        this._modal.walletsList = this.walletsList
+        this._modal.walletsList = this.walletsList as IWalletListItem[]
       }
       this._connected = false
     } finally {

sdk/packages/selector-polkadot/src/detection.ts

@@ -42,15 +42,7 @@ export const getPolkadotWalletsList = (presetList: WalletMetadata[], recentWalle
   const walletsData: Record<string, IPolkadotWalletListItem> = {}
 
   presetList.forEach((wallet) => {
-    walletsData[wallet.slug.toLocaleLowerCase()] = {
-      slug: wallet.slug,
-      name: wallet.name,
-      icon: wallet.image.default,
-      deeplink: wallet.mobile,
-      link: wallet.homepage,
-      walletType: wallet.walletType,
-      recent: recentWalletName === wallet.name
-    }
+    walletsData[wallet.slug.toLocaleLowerCase()] = wallet
   })
   for (const wallet of windowWallets) {
     // Check if wallet is already in the list
@@ -91,12 +83,18 @@ export const getPolkadotWalletsList = (presetList: WalletMetadata[], recentWalle
     walletsData[wallet.name.toLocaleLowerCase()] = {
       slug: wallet.name,
       name: wallet.name,
-      icon: wallet.icon as string,
-      link: '',
-      deeplink: null,
+      image: {
+        default: wallet.icon as string,
+        sm: wallet.icon as string,
+        md: wallet.icon as string,
+        lg: wallet.icon as string
+      },
+      desktop: null,
+      mobile: null,
       recent: recentWalletName === wallet.name,
       detected: true,
       injectedWallet: wallet,
+      homepage: '',
       walletType: 'hybrid'
     }
   }

sdk/packages/selector-solana/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nightlylabs/wallet-selector-solana",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "",
   "type": "module",
   "exports": {
@@ -25,7 +25,7 @@
   "license": "ISC",
   "dependencies": {
     "@nightlylabs/nightly-connect-solana": "^0.0.29",
-    "@nightlylabs/wallet-selector-base": "^0.2.4",
+    "@nightlylabs/wallet-selector-base": "^0.3.1",
     "@solana/wallet-adapter-base": "^0.9.22",
     "@solana/wallet-standard": "^1.0.2",
     "@solana/web3.js": "^1.77.2",
@@ -41,4 +41,4 @@
     "tslib": "^2.5.3",
     "typescript": "^5.1.3"
   }
-}
+}