[Wallet] Fix Ledger disconnected message (#36163)

components/brave_wallet_ui/common/hardware/ledgerjs/ledger-untrusted-transport.ts

@@ -24,6 +24,8 @@ import {
 export class LedgerUntrustedMessagingTransport //
   extends LedgerMessagingTransport
 {
+  private deviceName: string = ''
+
   constructor(targetWindow: Window, targetUrl: string) {
     super(targetWindow, targetUrl)
 
@@ -40,29 +42,28 @@ export class LedgerUntrustedMessagingTransport //
     }
   }
 
-  private handleGetDeviceName = async (
-    command: GetDeviceNameCommand,
-  ): Promise<GetDeviceNameResponse> => {
+  private fillDeviceNameImpl = async (): Promise<void> => {
     try {
       const transport = await TransportWebHID.create()
       const deviceName = transport.deviceModel?.productName ?? ''
-      transport.close()
-      return {
-        ...command,
-        payload: {
-          success: true,
-          deviceName,
-        },
-      }
-    } catch (error) {
-      return {
-        ...command,
-        payload: {
-          success: false,
-          error: 'Failed to get device name',
-          code: undefined,
-        },
-      }
+      await transport.close()
+      this.deviceName = deviceName
+      console.log('this.deviceName', this.deviceName)
+    } catch (error) {}
+  }
+
+  private handleGetDeviceName = async (
+    command: GetDeviceNameCommand,
+  ): Promise<GetDeviceNameResponse> => {
+    if (!this.deviceName) {
+      await this.fillDeviceNameImpl()
+    }
+    return {
+      ...command,
+      payload: {
+        success: true,
+        deviceName: this.deviceName,
+      },
     }
   }
 
@@ -80,6 +81,9 @@ export class LedgerUntrustedMessagingTransport //
         },
       }
     }
+
+    await this.fillDeviceNameImpl()
+
     return {
       ...command,
       payload: {

components/brave_wallet_ui/components/extension/connect_hardware_wallet_panel/connect_hardware_wallet_panel.tsx

@@ -113,38 +113,13 @@ export const ConnectHardwareWalletPanel = ({ hardwareWalletCode }: Props) => {
 
   const account = signMessageAccount || confirmTransactionAccount
 
-  React.useEffect(() => {
-    let subscribed = true
-
-    const fetchDeviceName = async () => {
-      if (!account || !account.hardware) {
-        return
-      }
-
-      const name = await getDeviceNameFromDevice(
-        account.hardware.vendor,
-        account.accountId.coin,
-      )
-      if (subscribed) {
-        setDeviceName(name.success ? name.deviceName : '')
-      }
-    }
-
-    fetchDeviceName()
-
-    return () => {
-      subscribed = false
-    }
-  }, [account, hardwareWalletCode])
-
   // memos
   const isConnected = React.useMemo((): boolean => {
     return (
-      deviceName != ''
-      && hardwareWalletCode !== 'deviceNotConnected'
+      hardwareWalletCode !== 'deviceNotConnected'
       && hardwareWalletCode !== 'unauthorized'
     )
-  }, [deviceName, hardwareWalletCode])
+  }, [hardwareWalletCode])
 
   const title = React.useMemo(() => {
     if (!account) {
@@ -206,6 +181,19 @@ export const ConnectHardwareWalletPanel = ({ hardwareWalletCode }: Props) => {
     signMessageHardware,
   ])
 
+  const updateDeviceName = React.useCallback(async () => {
+    if (!account || !account.hardware) {
+      return
+    }
+    const name = await getDeviceNameFromDevice(
+      account.hardware.vendor,
+      account.accountId.coin,
+    )
+    setDeviceName(name.success ? name.deviceName : '')
+  }, [account])
+
+  useInterval(updateDeviceName, isConnected ? 500 : null)
+
   const retryHardwareOperation = React.useCallback(() => {
     if (isSigning) {
       onSignData()