feat: display additional ledger device info

src/chrome/dev-tools/components/LedgerSimulator.tsx

@@ -64,7 +64,7 @@ export const LedgerSimulator = () => {
 
   const getDeviceId = (wallet: BaseHdWallet): string => {
     const publicKey = wallet.derivePath(`365'`).publicKey
-    return blake2b(64).update(Buffer.from(publicKey, 'hex')).digest('hex')
+    return blake2b(32).update(Buffer.from(publicKey, 'hex')).digest('hex')
   }
 
   const sendDeviceIdResponse = async () => {
@@ -125,9 +125,8 @@ export const LedgerSimulator = () => {
 
   const signTx = async () => {
     const wallet = createRadixWallet({ seed, curve })
-    const privateKey = wallet.deriveFullPath(hdPath).privateKey
-    const publicKey = wallet.deriveFullPath(hdPath).publicKey
-    const hash = blake2b(64)
+    const { privateKey, publicKey } = wallet.deriveFullPath(hdPath)
+    const hash = blake2b(32)
       .update(Buffer.from(txIntent, 'base64'))
       .digest('hex')
 

src/ledger/components/ledger-device-box.tsx

@@ -0,0 +1,16 @@
+import { Box, Header } from 'components'
+import { LedgerDevice } from '../schemas'
+
+const deviceName = {
+  nanoS: 'Nano S',
+  'nanoS+': 'Nano S+',
+  nanoX: 'Nano X',
+} as const
+
+export const LedgerDeviceBox = (params: LedgerDevice) => (
+  <Box textAlign="center" py="large">
+    <Header>
+      {params.name} ({deviceName[params.model]})
+    </Header>
+  </Box>
+)

src/ledger/schemas.ts

@@ -22,6 +22,14 @@ const ledgerDiscriminator = union([
   literal('importOlympiaDevice'),
 ])
 
+export const LedgerDeviceSchema = object({
+  name: string().optional(),
+  model: ledgerDeviceModel,
+  id: string(),
+})
+
+export type LedgerDevice = z.infer<typeof LedgerDeviceSchema>
+
 export const LedgerDeviceIdRequestSchema = object({
   interactionId: string(),
   discriminator: literal('getDeviceInfo'),
@@ -36,11 +44,7 @@ export const LedgerPublicKeyRequestSchema = object({
     curve,
     derivationPath: string(),
   }),
-  ledgerDevice: object({
-    name: string().optional(),
-    model: ledgerDeviceModel,
-    id: string(),
-  }),
+  ledgerDevice: LedgerDeviceSchema,
 })
 
 export type LedgerPublicKeyRequest = z.infer<
@@ -54,11 +58,7 @@ export const LedgerSignTransactionRequestSchema = object({
     curve,
     derivationPath: string(),
   }),
-  ledgerDevice: object({
-    name: string().optional(),
-    model: ledgerDeviceModel,
-    id: string(),
-  }),
+  ledgerDevice: LedgerDeviceSchema,
   compiledTransactionIntent: string(),
   mode: union([literal('verbose'), literal('summary')]),
 })
@@ -74,11 +74,7 @@ export const LedgerSignChallengeRequestSchema = object({
     curve,
     derivationPath: string(),
   }),
-  ledgerDevice: object({
-    name: string().optional(),
-    model: ledgerDeviceModel,
-    id: string(),
-  }),
+  ledgerDevice: LedgerDeviceSchema,
   challenge: string(),
 })
 

src/ledger/views/apply-ledger-factor.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Header } from 'components'
+import { Button } from 'components'
 import { ErrorText } from '../components/error-text'
 import { ledger } from 'ledger/ledger-wrapper'
 import {
@@ -8,6 +8,12 @@ import {
 } from 'ledger/schemas'
 import { PairingHeader } from 'pairing/components/pairing-header'
 import { useState } from 'react'
+import { LedgerDeviceBox } from 'ledger/components/ledger-device-box'
+
+const EntityType = {
+  Account: '525',
+  Identity: '618'
+} as const
 
 export const ApplyLedgerFactor = ({
   message,
@@ -19,6 +25,12 @@ export const ApplyLedgerFactor = ({
   const [error, setError] = useState<string | undefined>()
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
+  const header = message.keyParameters.derivationPath
+    .split('/')[4]
+    .includes(EntityType.Account)
+    ? 'Apply Ledger Factor to Account Security'
+    : 'Apply Ledger Factor to Persona Security'
+
   const getPublicKey = async () => {
     setIsLoading(true)
     const publicKey = await ledger.getPublicKey(message)
@@ -32,15 +44,13 @@ export const ApplyLedgerFactor = ({
   }
   return (
     <>
-      <PairingHeader header="Apply Ledger Factor to Account Security">
+      <PairingHeader header={header}>
         Please connect the following Ledger hardware wallet device to this
         computer and click Continue:
       </PairingHeader>
 
       <ErrorText error={error} />
-      <Box textAlign="center" py="large">
-        <Header>{message.ledgerDevice.name}</Header>
-      </Box>
+      <LedgerDeviceBox {...message.ledgerDevice} />
       <Button full mt="large" onClick={getPublicKey} disabled={isLoading}>
         Continue
       </Button>

src/ledger/views/sign-challenge.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Header } from 'components'
+import { Button } from 'components'
+import { LedgerDeviceBox } from 'ledger/components/ledger-device-box'
 import { LedgerResponse, LedgerSignChallengeRequest } from 'ledger/schemas'
 import { PairingHeader } from 'pairing/components/pairing-header'
 
@@ -14,9 +15,7 @@ export const SignChallenge = ({
       Please connect the following Ledger hardware wallet device to this
       computer and click Continue:
     </PairingHeader>
-    <Box textAlign="center" py="large">
-      <Header>{message.ledgerDevice.name}</Header>
-    </Box>
+    <LedgerDeviceBox {...message.ledgerDevice} />
     <Button>Continue</Button>
   </>
 )

src/ledger/views/sign-transaction.tsx

@@ -1,5 +1,6 @@
-import { Button, Header, Box } from 'components'
+import { Button } from 'components'
 import { ErrorText } from 'ledger/components/error-text'
+import { LedgerDeviceBox } from 'ledger/components/ledger-device-box'
 import { ledger } from 'ledger/ledger-wrapper'
 import {
   LedgerResponse,
@@ -39,10 +40,7 @@ export const SignTransaction = ({
       </PairingHeader>
       <ErrorText error={error} />
 
-      <Box textAlign="center" py="large">
-        <Header>{message.ledgerDevice.name}</Header>
-      </Box>
-
+      <LedgerDeviceBox {...message.ledgerDevice} />
       <Button onClick={sign} disabled={isLoading}>
         Continue
       </Button>