refactor: implement wallet detection and information handling in NodeArweaveWallet

Author: pawanpaudel93

src/index.ts

@@ -56,6 +56,8 @@ export class NodeArweaveWallet {
   private readonly config: NodeArweaveWalletConfig
   private readonly pendingRequests = new Map<string, PendingRequest>()
   private sseClient: http.ServerResponse | null = null
+  private _walletName: string = ''
+  private _walletVersion: string = ''
 
   private address: string | null = null
   private browserConnected = false
@@ -157,6 +159,14 @@ export class NodeArweaveWallet {
     })
   }
 
+  get walletName(): string {
+    return this._walletName
+  }
+
+  get walletVersion(): string {
+    return this._walletVersion
+  }
+
   /**
    * Requests a connection to the user's Arweave wallet with specified permissions.
    * This prompts the user to approve the connection in their browser wallet extension.
@@ -792,6 +802,7 @@ export class NodeArweaveWallet {
       'GET /': () => this.handleGetRoot(res),
       'GET /events': () => this.handleSSE(res),
       'POST /response': () => this.handleResponse(req, res),
+      'POST /wallet-info': () => this.handleWalletInfo(req, res),
     }
 
     const key = `${req.method} ${req.url}`
@@ -905,6 +916,25 @@ export class NodeArweaveWallet {
     })
   }
 
+  private handleWalletInfo(req: http.IncomingMessage, res: http.ServerResponse): void {
+    this.readRequestBody(req, body => {
+      try {
+        const info = JSON.parse(body)
+
+        if (!this._walletName && !this._walletVersion) {
+          this._walletName = info.name || 'Unknown Wallet'
+          this._walletVersion = info.version || '1.0.0'
+
+          console.log(`📱 Wallet detected: ${this._walletName} (v${this._walletVersion})`)
+        }
+
+        this.sendJSON(res, 200, { success: true })
+      } catch (error: any) {
+        this.sendJSON(res, 400, { error: error.message })
+      }
+    })
+  }
+
   private readRequestBody(req: http.IncomingMessage, callback: (body: string) => void): void {
     let body = ''
     req.on('data', chunk => (body += chunk.toString()))

src/signer/signer.js

@@ -78,6 +78,8 @@ let currentState = States.DISCONNECTED
 let walletAddress = null
 let eventSource = null
 const requestQueue = new Map()
+let isWalletDetected = false
+let isWalletDetectionLogged = false
 
 // eslint-disable-next-line no-undef
 const arweave = Arweave.init({
@@ -270,6 +272,18 @@ async function sendResponse(id, result, error = null) {
   })
 }
 
+async function sendWalletInfo(walletName, walletVersion) {
+  try {
+    await fetch('/wallet-info', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: walletName, version: walletVersion }),
+    })
+  } catch (error) {
+    console.error('Failed to send wallet info:', error)
+  }
+}
+
 /**
  * Check if a wallet API method is supported
  * @param {string} methodName - The name of the wallet API method to check
@@ -689,21 +703,46 @@ function startEventStream() {
 }
 
 // ==================== Initialization ====================
-window.addEventListener('load', () => {
-  cacheDOMElements()
-  initTheme()
-  startEventStream()
+async function handleWalletDetection() {
+  if (isWalletDetected && isWalletDetectionLogged) return
 
-  setTimeout(() => {
-    if (window.arweaveWallet) {
-      log(`${window.arweaveWallet?.name || 'Arweave'} wallet extension detected. Waiting for connection request...`)
-      setState(States.DISCONNECTED, '⏳ Waiting for connection request...')
-    } else {
+  if (!window.arweaveWallet) {
+    if (dom.log && !isWalletDetectionLogged) {
       setState(
         States.ERROR,
         'No Arweave wallet extension detected<br><small>Please install Wander or any other compatible wallet and refresh this page</small>',
       )
       log('Please install Wander or any other compatible wallet extension', 'error')
+      isWalletDetectionLogged = true
     }
-  }, 500)
+    return
+  }
+
+  const name = window.arweaveWallet?.walletName || 'Unknown Wallet'
+  const version = window.arweaveWallet?.walletVersion || '1.0.0'
+
+  if (dom.log && !isWalletDetectionLogged) {
+    log(`${name} (v${version}) detected. Waiting for connection request...`)
+    setState(States.DISCONNECTED, '⏳ Waiting for connection request...')
+    isWalletDetectionLogged = true
+  }
+
+  if (isWalletDetected) return
+  isWalletDetected = true
+  await sendWalletInfo(name, version)
+}
+
+// Initialize on load
+window.addEventListener('load', () => {
+  cacheDOMElements()
+  initTheme()
+  startEventStream()
+
+  if (window.arweaveWallet) {
+    handleWalletDetection()
+  } else {
+    setTimeout(handleWalletDetection, 500)
+  }
 })
+
+window.addEventListener('arweaveWalletLoaded', handleWalletDetection)