feat: open ledger popup window

* feat: open ledger popup window
* feat: refactor ledger wrapper methods
* feat: trigger ledger command automatically
* feat: add auth challenge ledger signing flow

src/chrome/background/background.ts

@@ -9,6 +9,7 @@ import { createMessage } from '../messages/create-message'
 import { MessageClient } from '../messages/message-client'
 import { openParingPopup } from '../helpers/open-pairing-popup'
 import { AppLogger } from 'utils/logger'
+import { LedgerTabWatcher } from './ledger-tab-watcher'
 
 const backgroundLogger = {
   debug: (...args: string[]) => console.log(JSON.stringify(args, null, 2)),
@@ -38,8 +39,13 @@ const handleStorageChange = (changes: {
     )
 }
 
+const ledgerTabWatcher = LedgerTabWatcher()
+
 const messageHandler = MessageClient(
-  BackgroundMessageHandler({ logger: backgroundLogger }),
+  BackgroundMessageHandler({
+    logger: backgroundLogger,
+    ledgerTabWatcher: ledgerTabWatcher,
+  }),
   'background',
   { logger: backgroundLogger }
 )
@@ -55,9 +61,14 @@ const handleConnectionPasswordChange = (connectionPassword?: string) =>
       }, config.popup.closeDelayTime)
     })
 
+const tabRemovedListener = (tabId: number) =>
+  ledgerTabWatcher.triggerTabRemoval(tabId)
+
 chrome.runtime.onMessage.addListener((message, sender) => {
   messageHandler.onMessage(message, sender.tab?.id)
 })
+
+chrome.tabs.onRemoved.addListener(tabRemovedListener)
 chrome.storage.onChanged.addListener(handleStorageChange)
 chrome.action.onClicked.addListener(openParingPopup)
 chrome.runtime.onInstalled.addListener(handleOnInstallExtension)

src/chrome/background/ledger-tab-watcher.ts

@@ -0,0 +1,31 @@
+import { createMessage } from 'chrome/messages/create-message'
+import { sendMessage } from 'chrome/messages/send-message'
+
+export const LedgerTabWatcher = () => {
+  let tabId: number | undefined
+  let messageId: string | undefined
+  return {
+    setWatchedTab: (_tabId: number, _messageId: string) => {
+      tabId = _tabId
+      messageId = _messageId
+    },
+    triggerTabRemoval: (justRemovedTabId: number) => {
+      if (!messageId || !tabId || justRemovedTabId !== tabId) {
+        return
+      }
+
+      sendMessage(
+        createMessage.confirmationError('ledger', messageId, {
+          reason: 'tabClosed',
+        })
+      )
+
+      tabId = undefined
+      messageId = undefined
+    },
+    restoreInitial: () => {
+      tabId = undefined
+      messageId = undefined
+    },
+  }
+}

src/chrome/background/message-handler.ts

@@ -10,21 +10,24 @@ import {
 } from '../messages/_types'
 import { getConnectionPassword as getConnectionPasswordFn } from '../helpers/get-connection-password'
 import { config } from 'config'
-import { createOrFocusTab } from 'chrome/helpers/create-or-focus-tab'
-import { sendMessage } from 'chrome/messages/send-message'
-import { createMessage } from 'chrome/messages/create-message'
+import { createAlignedPopupWindow } from 'chrome/helpers/create-popup-window'
+import { sendMessageToTab } from 'chrome/helpers/send-message-to-tab'
+import { createAndFocusTab } from 'chrome/helpers/create-and-focus-tab'
+import { LedgerTabWatcher } from './ledger-tab-watcher'
 
 export type BackgroundMessageHandler = ReturnType<
   typeof BackgroundMessageHandler
 >
 export const BackgroundMessageHandler =
   ({
     logger,
+    ledgerTabWatcher,
     getConnectionPassword = getConnectionPasswordFn,
     closePopup = closePopupFn,
     openParingPopup = openParingPopupFn,
   }: Partial<{
     logger?: AppLogger
+    ledgerTabWatcher: ReturnType<typeof LedgerTabWatcher>
     getConnectionPassword: () => ResultAsync<any, Error>
     closePopup: () => ResultAsync<any, Error>
     openParingPopup: () => ResultAsync<any, Error>
@@ -70,21 +73,23 @@ export const BackgroundMessageHandler =
         }))
       }
 
-      case messageDiscriminator.walletToLedger:
-        return createOrFocusTab(config.popup.pages.ledger)
+      case messageDiscriminator.convertPopupToTab: {
+        ledgerTabWatcher?.restoreInitial()
+
+        return createAndFocusTab(config.popup.pages.ledger)
           .andThen((tab) => {
-            const tabRemovedListener = (tabId: number) => {
-              if (tabId === tab.id) {
-                chrome.tabs.onRemoved.removeListener(tabRemovedListener)
-                sendMessage(
-                  createMessage.confirmationError('ledger', message.messageId, {
-                    reason: 'tabClosed',
-                  })
-                )
-              }
-            }
+            ledgerTabWatcher?.setWatchedTab(tab.id!, message.data.messageId)
+            return sendMessageToTab(tab.id!, message.data)
+          })
+          .map(() => ({ sendConfirmation: false }))
+          .mapErr(() => ({ reason: 'failedToOpenLedgerTab' }))
+      }
 
-            chrome.tabs.onRemoved.addListener(tabRemovedListener)
+      case messageDiscriminator.walletToLedger:
+        ledgerTabWatcher?.restoreInitial()
+        return createAlignedPopupWindow(config.popup.pages.ledger)
+          .andThen((tab) => {
+            ledgerTabWatcher?.setWatchedTab(tab.id!, message.messageId)
 
             return sendMessageWithConfirmation(
               { ...message, source: 'background' },

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

@@ -6,9 +6,10 @@ import { Box, Button, Header, Text } from 'components'
 import {
   getDerivePublicKeyPayload,
   getDeviceInfoPayload,
-  getSignTransactionPayload,
   getSignChallengePayload,
   getImportFromOlympiaPayload,
+  getSignEd25519TransactionPayload,
+  getSignSecp256k1TransactionPayload,
 } from '../example'
 import { getConnectionPassword } from 'chrome/helpers/get-connection-password'
 export const WalletSimulator = () => {
@@ -21,10 +22,11 @@ export const WalletSimulator = () => {
 
   const messages = {
     'Import from Olympia': getImportFromOlympiaPayload(),
-    'Get UDI from Ledger': getDeviceInfoPayload(),
-    'Get Public Key from Ledger': getDerivePublicKeyPayload(),
-    'Sign Transaction on Ledger': getSignTransactionPayload(),
-    'Sign Challenge on Ledger': getSignChallengePayload(),
+    'Get UDI': getDeviceInfoPayload(),
+    'Get Public Key': getDerivePublicKeyPayload(),
+    'Sign TX (Secp256k1)': getSignSecp256k1TransactionPayload(),
+    'Sign TX (Curve25519)': getSignEd25519TransactionPayload(),
+    'Sign Auth': getSignChallengePayload(),
   }
 
   useEffect(() => {

src/chrome/dev-tools/example.ts

@@ -47,42 +47,61 @@ export const getDerivePublicKeyPayload = (): LedgerPublicKeyRequest => ({
   },
 })
 
-export const getSignTransactionPayload = (): LedgerSignTransactionRequest => ({
-  interactionId: crypto.randomUUID(),
-  discriminator: 'signTransaction',
-  signers: [
-    {
-      curve: 'curve25519',
-      derivationPath: 'm/44H/1022H/10H/525H/1460H/0H',
+export const getSignEd25519TransactionPayload =
+  (): LedgerSignTransactionRequest => ({
+    interactionId: crypto.randomUUID(),
+    discriminator: 'signTransaction',
+    signers: [
+      {
+        curve: 'curve25519',
+        derivationPath: 'm/44H/1022H/10H/525H/1460H/0H',
+      },
+      {
+        curve: 'curve25519',
+        derivationPath: 'm/44H/1022H/10H/525H/1460H/1H',
+      },
+    ],
+    ledgerDevice: {
+      name: 'My Ledger Device',
+      model: 'nanoS',
+      id: '41ac202687326a4fc6cb677e9fd92d08b91ce46c669950d58790d4d5e583adc0',
     },
-    {
-      curve: 'curve25519',
-      derivationPath: 'm/44H/1022H/10H/525H/1460H/1H',
+    displayHash: true,
+    compiledTransactionIntent: compiledTxHex.createAccount,
+    mode: 'verbose',
+  })
+
+export const getSignSecp256k1TransactionPayload =
+  (): LedgerSignTransactionRequest => ({
+    interactionId: crypto.randomUUID(),
+    discriminator: 'signTransaction',
+    signers: [
+      {
+        curve: 'secp256k1',
+        derivationPath: 'm/44H/1022H/10H/525H/1238H',
+      },
+    ],
+    ledgerDevice: {
+      name: 'My Ledger Device',
+      model: 'nanoS',
+      id: '41ac202687326a4fc6cb677e9fd92d08b91ce46c669950d58790d4d5e583adc0',
     },
-  ],
-  ledgerDevice: {
-    name: 'My Ledger Device',
-    model: 'nanoS',
-    id: '41ac202687326a4fc6cb677e9fd92d08b91ce46c669950d58790d4d5e583adc0',
-  },
-  displayHash: true,
-  compiledTransactionIntent: compiledTxHex.createAccount,
-  mode: 'verbose',
-})
+    displayHash: true,
+    compiledTransactionIntent: compiledTxHex.createAccount,
+    mode: 'verbose',
+  })
 
 export const getSignChallengePayload = (): LedgerSignChallengeRequest => ({
   interactionId: crypto.randomUUID(),
   discriminator: 'signChallenge',
-  signers: [
-    {
-      curve: 'curve25519',
-      derivationPath: 'm/44H/1022H/10H/525H/1460H/0H',
-    },
-  ],
+  derivationPaths: ['m/44H/1022H/10H/525H/1460H/0H'],
   ledgerDevice: {
     name: 'My Ledger Device',
     model: 'nanoS',
     id: '41ac202687326a4fc6cb677e9fd92d08b91ce46c669950d58790d4d5e583adc0',
   },
-  challenge: '',
+  challenge: '140100298edb9cadd80423c1e15e2521d44f51be8b6a7953c9f03d83a8220071',
+  origin: 'https://rola.xrd',
+  dAppDefinitionAddress:
+    'account_tdx_b_1p8ahenyznrqy2w0tyg00r82rwuxys6z8kmrhh37c7maqpydx7p',
 })

src/chrome/helpers/create-and-focus-tab.ts

@@ -0,0 +1,4 @@
+import { createTab } from './create-tab'
+
+export const createAndFocusTab = (url: string) =>
+  createTab(url).map((tab) => chrome.tabs.update(tab.id!, { active: true }))

src/chrome/helpers/create-or-focus-tab.ts

@@ -1,24 +1,12 @@
 import { ResultAsync } from 'neverthrow'
 import { getExtensionTabsByUrl } from './get-extension-tabs-by-url'
+import { createTab } from './create-tab'
 
 export const createOrFocusTab = (url: string) =>
   getExtensionTabsByUrl(url).andThen((tabs) =>
-    ResultAsync.fromSafePromise(
-      tabs.length > 0 && tabs[0].id
-        ? chrome.tabs.update(tabs[0].id, { active: true })
-        : new Promise<chrome.tabs.Tab>((resolve) => {
-            chrome.tabs.create({ url }, async (tab) => {
-              const listener = (
-                tabId: number,
-                info: chrome.tabs.TabChangeInfo
-              ) => {
-                if (info.status === 'complete' && tabId === tab.id) {
-                  chrome.tabs.onUpdated.removeListener(listener)
-                  resolve(tab)
-                }
-              }
-              chrome.tabs.onUpdated.addListener(listener)
-            })
-          })
-    )
+    tabs.length > 0 && tabs[0].id
+      ? ResultAsync.fromSafePromise(
+          chrome.tabs.update(tabs[0].id, { active: true })
+        )
+      : createTab(url)
   )

src/chrome/helpers/create-popup-window.ts

@@ -1,5 +1,28 @@
 import { config } from 'config'
 import { ResultAsync } from 'neverthrow'
+import { getActiveWindow } from './get-active-window'
+
+export const createAlignedPopupWindow = (pagePath: string) =>
+  getActiveWindow()
+    .andThen(({ width, left, height, top }) =>
+      createPopupWindow(pagePath, { width, left, height, top })
+    )
+    .andThen((popupWindow) =>
+      ResultAsync.fromSafePromise(
+        new Promise<chrome.tabs.Tab>((resolve) => {
+          const listener = (tabId: number, info: chrome.tabs.TabChangeInfo) => {
+            if (
+              info.status === 'complete' &&
+              tabId === popupWindow?.tabs?.[0].id
+            ) {
+              chrome.tabs.onUpdated.removeListener(listener)
+              resolve(popupWindow?.tabs?.[0])
+            }
+          }
+          chrome.tabs.onUpdated.addListener(listener)
+        })
+      )
+    )
 
 export const createPopupWindow = (
   pagePath: string,
@@ -14,7 +37,7 @@ export const createPopupWindow = (
     new Promise((resolve) => {
       chrome.windows.create(
         {
-          url: chrome.runtime.getURL(pagePath),
+          url: `${chrome.runtime.getURL(pagePath)}?isPopupWindow=true`,
           type: 'popup',
           width: config.popup.width,
           height: config.popup.height,

src/chrome/helpers/create-tab.ts

@@ -0,0 +1,16 @@
+import { ResultAsync } from 'neverthrow'
+
+export const createTab = (url: string) =>
+  ResultAsync.fromSafePromise(
+    new Promise<chrome.tabs.Tab>((resolve) => {
+      chrome.tabs.create({ url }, async (tab) => {
+        const listener = (tabId: number, info: chrome.tabs.TabChangeInfo) => {
+          if (info.status === 'complete' && tabId === tab.id) {
+            chrome.tabs.onUpdated.removeListener(listener)
+            resolve(tab)
+          }
+        }
+        chrome.tabs.onUpdated.addListener(listener)
+      })
+    })
+  )

src/chrome/messages/_types.ts

@@ -8,6 +8,7 @@ export const messageDiscriminator = {
   dAppRequest: 'dAppRequest',
   ledgerResponse: 'ledgerResponse',
   walletToLedger: 'walletToLedger',
+  convertPopupToTab: 'convertPopupToTab',
   walletResponse: 'walletResponse',
   toContentScript: 'toContentScript',
   walletMessage: 'walletMessage',
@@ -72,6 +73,11 @@ export type Messages = {
     { messageEvent: MessageLifeCycleEvent; interactionId: string }
   >
 
+  [messageDiscriminator.convertPopupToTab]: MessageBuilder<
+    MessageDiscriminator['convertPopupToTab'],
+    { data: Messages['walletToLedger'] }
+  >
+
   [messageDiscriminator.getConnectionPassword]: MessageBuilder<
     MessageDiscriminator['getConnectionPassword'],
     {}

src/chrome/messages/create-message.ts

@@ -55,6 +55,12 @@ export const createMessage = {
     messageId: crypto.randomUUID(),
     data: message,
   }),
+  convertPopupToTab: (message: Messages['walletToLedger']) => ({
+    source: 'popup',
+    discriminator: messageDiscriminator.convertPopupToTab,
+    messageId: crypto.randomUUID(),
+    data: message,
+  }),
   ledgerResponse: (message: LedgerResponse): Messages['ledgerResponse'] => ({
     source: 'ledger',
     discriminator: messageDiscriminator.ledgerResponse,

src/components/link/link.tsx

@@ -5,6 +5,6 @@ export const Link = styled('a', {
   fontSize: '16px',
   color: 'white',
   '&:visited': {
-    color: '$primary',
+    color: 'white',
   },
 })