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

@@ -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 { type 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'
 
@@ -45,7 +49,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[]
     }
   }
 
@@ -65,7 +73,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

@@ -2,6 +2,8 @@ import { type AppBaseInitialize } from '@nightlylabs/nightly-connect-base'
 import { type Deeplink } from '@nightlylabs/nightly-connect-base/dist/types/bindings/Deeplink'
 import { type Wallet } from '@wallet-standard/core'
 import { type WalletType } from '../../../bindings/WalletType'
+import { type WalletMetadata as WalletMetadataOriginal } from '../../../bindings/WalletMetadata'
+import { Images } from '../../../bindings/Images'
 
 export interface Adapter {
   connect: () => Promise<void>
@@ -17,7 +19,16 @@ export interface MetadataWallet {
   walletType: WalletType
 }
 
-export interface IWalletListItem extends MetadataWallet {
+export interface WalletMetadata extends Partial<WalletMetadataOriginal> {
+  slug: string
+  name: string
+  walletType: WalletType
+  mobile: Deeplink | null
+  desktop: Deeplink | null
+  image: Images
+}
+
+export interface IWalletListItem extends WalletMetadata {
   recent?: boolean
   detected?: boolean
   standardWallet?: Wallet

sdk/packages/selector-polkadot/package.json

@@ -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,
@@ -163,7 +164,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,
@@ -212,7 +213,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,
@@ -309,47 +310,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}}',
@@ -599,7 +600,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

@@ -1,7 +1,6 @@
 import { type Injected, type InjectedExtension } from '@polkadot/extension-inject/types'
 import { type WalletIcon } from '@wallet-standard/core'
 import { appToIcon } from './tempIcons'
-import { IWalletListItem } from '@nightlylabs/wallet-selector-base'
 import { WalletMetadata } from '@nightlylabs/nightly-connect-polkadot'
 export interface PolkadotWalletInjected {
   // Default Polkadot standard
@@ -32,7 +31,9 @@ export const getPolkadotWallets = (): PolkadotWalletInjected[] => {
   }
 }
 
-export interface IPolkadotWalletListItem extends Omit<IWalletListItem, 'standardWallet'> {
+export interface IPolkadotWalletListItem extends WalletMetadata {
+  recent?: boolean
+  detected?: boolean
   injectedWallet?: PolkadotWalletInjected
 }
 
@@ -43,12 +44,7 @@ export const getPolkadotWalletsList = (presetList: WalletMetadata[], recentWalle
 
   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,
+      ...wallet,
       recent: recentWalletName === wallet.name
     }
   })
@@ -91,9 +87,14 @@ 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,

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"
   }
-}
+}