add: lazy loading modal solana selector

sdk/apps/modal-example/package.json

@@ -17,12 +17,13 @@
   "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",
     "@nightlylabs/nightly-connect-polkadot": "0.0.14",
-    "@nightlylabs/wallet-selector-polkadot": "0.2.0",
+    "@nightlylabs/wallet-selector-polkadot": "0.2.2",
+    "@nightlylabs/wallet-selector-base": "^0.4.0",
     "@polkadot/extension-inject": "^0.46.5",
     "@polkadot/api": "^10.10.1",
     "@solana/web3.js": "^1.77.2",
@@ -38,4 +39,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)
@@ -67,12 +66,16 @@ export default function Polkadot() {
         fallback={
           <button
             onClick={async () => {
-              console.log(getPolkadotWallets())
-              await adapter()!.connect()
-              const accounts = await adapter()!.accounts.get()
-              console.log(accounts)
-              setPublicKey(accounts[0].address)
-              console.log('adapter', adapter())
+              try {
+                console.log(getPolkadotWallets())
+                await adapter()!.connect()
+                const accounts = await adapter()!.accounts.get()
+                console.log(accounts)
+                setPublicKey(accounts[0].address)
+                console.log('adapter', adapter())
+              } catch (err) {
+                console.log(err)
+              }
             }}>
             Connect
           </button>

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: {
@@ -97,12 +97,16 @@ export default function Polkadot() {
         fallback={
           <button
             onClick={async () => {
-              console.log(getPolkadotWallets())
-              await adapter()!.connect()
-              const accounts = await adapter()!.accounts.get()
-              console.log(accounts)
-              setPublicKey(accounts[0].address)
-              console.log('adapter', adapter())
+              try {
+                console.log(getPolkadotWallets())
+                await adapter()!.connect()
+                const accounts = await adapter()!.accounts.get()
+                console.log(accounts)
+                setPublicKey(accounts[0].address)
+                console.log('adapter', adapter())
+              } catch (err) {
+                console.log(err)
+              }
             }}>
             Connect
           </button>

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,10 +23,12 @@ 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')
     )
-
+    adapter.on('connect', (a) => {
+      console.log('adapter connected', a)
+    })
     setAdapter(adapter)
 
     ApiPromise.create({
@@ -45,12 +47,16 @@ export default function Polkadot() {
         fallback={
           <button
             onClick={async () => {
-              console.log(getPolkadotWallets())
-              await adapter()!.connect()
-              const accounts = await adapter()!.accounts.get()
-              console.log(accounts)
-              setPublicKey(accounts[0].address)
-              console.log('adapter', adapter())
+              try {
+                console.log(getPolkadotWallets())
+                await adapter()!.connect()
+                const accounts = await adapter()!.accounts.get()
+                console.log(accounts)
+                setPublicKey(accounts[0].address)
+                console.log('adapter', adapter())
+              } catch (err) {
+                console.log(err)
+              }
             }}>
             Connect
           </button>

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

@@ -0,0 +1,155 @@
+import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { Title } from 'solid-start'
+import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-solana'
+import { Connection, PublicKey, SystemProgram, Transaction as SolanaTx } from '@solana/web3.js'
+import toast from 'solid-toast'
+import { AppInitData, NightlyConnectSelectorModal } from '@nightlylabs/wallet-selector-base'
+import { SOLANA_NETWORK } from '@nightlylabs/nightly-connect-solana'
+
+const connection = new Connection('https://api.devnet.solana.com')
+
+export default function SolanaExternalModal() {
+  const [adapter, setAdapter] = createSignal<NightlyConnectAdapter>()
+  const [modal, setModal] = createSignal<NightlyConnectSelectorModal>()
+  const [eager, setEager] = createSignal(false)
+  const [publicKey, setPublicKey] = createSignal<PublicKey>()
+  onMount(async () => {
+    const appInitData: AppInitData = {
+      appMetadata: {
+        name: 'NCTestSolana',
+        description: 'Nightly Connect Test',
+        icon: 'https://docs.nightly.app/img/logo.png',
+        additionalInfo: 'Courtesy of Nightly Connect team'
+      },
+      persistent: true
+    }
+
+    const adapter = await NightlyConnectAdapter.build(
+      appInitData,
+      { disableModal: true },
+      document.getElementById('modalAnchor')
+    )
+
+    const modal = new NightlyConnectSelectorModal(
+      adapter.walletsList,
+      appInitData.url ?? 'https://nc2.nightly.app',
+      {
+        name: SOLANA_NETWORK,
+        icon: 'https://assets.coingecko.com/coins/images/4128/small/solana.png'
+      },
+      document.getElementById('modalAnchor')
+    )
+
+    setModal(modal)
+
+    adapter.on('connect', (pk) => {
+      modal.closeModal()
+      setPublicKey(pk)
+    })
+
+    adapter.on('disconnect', () => {
+      modal.walletsList = adapter.walletsList
+      setPublicKey(undefined)
+    })
+
+    adapter.canEagerConnect().then((canEagerConnect) => {
+      setEager(canEagerConnect)
+    })
+
+    setAdapter(adapter)
+  })
+
+  createEffect(() => {
+    if (eager()) {
+      adapter()
+        ?.connect()
+        .then(
+          () => {
+            console.log('connect resolved successfully')
+          },
+          () => {
+            console.log('connect rejected')
+          }
+        )
+    }
+  })
+
+  return (
+    <main>
+      <Title>Solana with External Modal Example</Title>
+      <div id="modalAnchor" />
+      <Show
+        when={!!publicKey()}
+        fallback={
+          <button
+            onClick={() => {
+              if (adapter()?.connecting) {
+                console.log('Cannot connect while connecting')
+                return
+              }
+
+              if (adapter()?.connected) {
+                return
+              }
+
+              modal()?.openModal(adapter()?.sessionId ?? undefined, async (walletName) => {
+                try {
+                  modal()?.setStandardWalletConnectProgress(true)
+                  await adapter()?.connectToWallet(walletName)
+                } catch (err) {
+                  modal()?.setStandardWalletConnectProgress(false)
+                  console.log('error')
+                  modal()?.closeModal()
+                }
+              })
+            }}>
+            Connect
+          </button>
+        }>
+        <h1>Current public key: {publicKey()!.toString()}</h1>
+        <button
+          onClick={async () => {
+            try {
+              const ix = SystemProgram.transfer({
+                fromPubkey: adapter()!.publicKey!,
+                lamports: 1e6,
+                toPubkey: new PublicKey('147oKbjwGDHEthw7sRKNrzYiRiGqYksk1ravTMFkpAnv')
+              })
+              const tx = new SolanaTx().add(ix).add(ix).add(ix).add(ix).add(ix)
+              const a = await connection.getRecentBlockhash()
+              tx.recentBlockhash = a.blockhash
+              tx.feePayer = adapter()!.publicKey!
+              const signedTx = await adapter()!.signTransaction!(tx)
+              await connection.sendRawTransaction(signedTx!.serialize())
+
+              toast.success('Transaction was signed and sent!')
+            } catch (e) {
+              toast.error("Error: couldn't sign and send transaction!")
+              console.log(e)
+            }
+          }}>
+          Send 0.005 SOL
+        </button>
+        <button
+          onClick={async () => {
+            try {
+              await adapter()!.signMessage!(new TextEncoder().encode('I love Nightly'))
+
+              toast.success('Message was signed!')
+            } catch (e) {
+              toast.error("Error: couldn't sign message!")
+              console.log(e)
+            }
+          }}>
+          Sign message
+        </button>
+        <button
+          onClick={() => {
+            adapter()?.disconnect()
+          }}>
+          Disconnect
+        </button>
+      </Show>
+    </main>
+  )
+}

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

@@ -14,6 +14,9 @@ export default function Home() {
       <A href="/solanaInitOnConnect">
         <button>Solana - init app on connect</button>
       </A>
+      <A href="/externalModal">
+        <button>Solana - external modal</button>
+      </A>
       <A href="/sui">
         <button>Sui</button>
       </A>

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/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nightlylabs/wallet-selector-modal",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "exports": {
     ".": {
@@ -55,4 +55,4 @@
     "typescript": "^5.0.2",
     "vite": "^4.3.9"
   }
-}
+}

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

@@ -154,7 +154,7 @@ export const Error: Story = (args: NightlyModalArgs) => {
 
   if (!args.sessionId)
     setTimeout(() => {
-      updateArgs({ timeoutError: true })
+      updateArgs({ timeoutError: 'error' })
     }, 5000)
 
   return html`<nightly-desktop-main