Address comments

packages/extension/src/ui/features/actions/ApproveSignUnsignedTxScreen.tsx

@@ -9,8 +9,10 @@ import { AccountNetworkInfo } from "./transaction/AccountNetworkInfo"
 import blake from 'blakejs'
 import { TxHashContainer } from "./TxHashContainer"
 import { useTranslation } from "react-i18next"
-import { getConfirmationTextByState, LedgerStatus, useLedgerApp } from "./LedgerStatus"
+import { LedgerStatus } from "./LedgerStatus"
 import { useNavigate } from "react-router-dom"
+import { useLedgerApp } from "../ledger/useLedgerApp"
+import { getConfirmationTextByState } from "../ledger/types"
 
 interface ApproveSignUnsignedTxScreenProps
   extends Omit<ConfirmPageProps, "onSubmit"> {

packages/extension/src/ui/features/actions/ApproveTransactionScreen.tsx

@@ -28,7 +28,9 @@ import { BigNumber } from "ethers"
 import { addTokenToBalances } from "../../../shared/token/balance"
 import { useTranslation } from "react-i18next"
 import i18n from "../../../i18n"
-import { getConfirmationTextByState, LedgerStatus, useLedgerApp } from "./LedgerStatus"
+import { LedgerStatus } from "./LedgerStatus"
+import { useLedgerApp } from "../ledger/useLedgerApp"
+import { getConfirmationTextByState } from "../ledger/types"
 
 const minimalGasFee = BigInt(20000) * BigInt(100000000000)
 

packages/extension/src/ui/features/actions/LedgerStatus.tsx

@@ -1,14 +1,10 @@
 import { L1, icons } from "@argent/ui"
 import { Flex, Text } from "@chakra-ui/react"
-import { useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Account } from "../accounts/Account"
-import { LedgerAlephium } from "../ledger/utils"
+import { LedgerState } from "../ledger/types"
 
 const { AlertIcon } = icons
 
-export type LedgerState = "detecting" | "notfound" | "signing" | "succeeded" | "failed"
-
 export const LedgerStatus = ({ ledgerState }: { ledgerState: LedgerState | undefined }): JSX.Element => {
   const { t } = useTranslation()
   return (
@@ -31,67 +27,3 @@ export const LedgerStatus = ({ ledgerState }: { ledgerState: LedgerState | undef
       : <></>
   )
 }
-
-export type LedgerConfirmation = "Sign with Ledger" | "Ledger: Detecting" | "Ledger: Signing" | "Ledger: Succeeded" | "Ledger: Failed"
-export function getConfirmationTextByState(ledgerState: LedgerState | undefined): LedgerConfirmation {
-  return ledgerState === undefined
-    ? "Sign with Ledger"
-    : (ledgerState === "detecting") || (ledgerState === "notfound")
-    ? "Ledger: Detecting"
-    : ledgerState === "signing"
-    ? "Ledger: Signing"
-    : ledgerState === "succeeded"
-    ? "Ledger: Succeeded"
-    : "Ledger: Failed"
-}
-
-export function useLedgerApp({
-  selectedAccount,
-  unsignedTx,
-  onSubmit,
-  navigate,
-  onReject,
-} : {
-  selectedAccount: Account | undefined,
-  unsignedTx: string | undefined,
-  onSubmit: (signature: string) => void,
-  navigate: (n: number) => void,
-  onReject?: () => void
-}) {
-  const [ledgerState, setLedgerState] = useState<LedgerState>()
-  const [ledgerApp, setLedgerApp] = useState<LedgerAlephium>()
-
-  const ledgerSign = useCallback(async () => {
-    if (selectedAccount === undefined) {
-      return
-    }
-    setLedgerState(oldState => oldState === undefined ? "detecting" : oldState)
-
-    let app: LedgerAlephium | undefined
-    if (unsignedTx !== undefined) {
-      try {
-        app = await LedgerAlephium.create()
-        setLedgerApp(app)
-        setLedgerState("signing")
-        const signature = await app.signUnsignedTx(selectedAccount, Buffer.from(unsignedTx, "hex"))
-        setLedgerState("succeeded")
-        onSubmit(signature)
-      } catch (e) {
-        if (app === undefined) {
-          setLedgerState(oldState => oldState === undefined || oldState === "detecting" ? "notfound" : oldState)
-          setTimeout(ledgerSign, 1000)
-        } else {
-          await app.close()
-          setLedgerState("failed")
-          if (onReject !== undefined) {
-            onReject()
-          } else {
-            navigate(-1)
-          }
-        }
-      }
-    }
-  }, [selectedAccount, onSubmit, onReject, navigate, unsignedTx])
-
-  return { ledgerState, ledgerApp, ledgerSign }
-}

packages/extension/src/ui/features/ledger/types.ts

@@ -0,0 +1,14 @@
+export type LedgerState = "detecting" | "notfound" | "signing" | "succeeded" | "failed"
+export type LedgerConfirmation = "Sign with Ledger" | "Ledger: Detecting" | "Ledger: Signing" | "Ledger: Succeeded" | "Ledger: Failed"
+
+export function getConfirmationTextByState(ledgerState: LedgerState | undefined): LedgerConfirmation {
+  return ledgerState === undefined
+    ? "Sign with Ledger"
+    : (ledgerState === "detecting") || (ledgerState === "notfound")
+    ? "Ledger: Detecting"
+    : ledgerState === "signing"
+    ? "Ledger: Signing"
+    : ledgerState === "succeeded"
+    ? "Ledger: Succeeded"
+    : "Ledger: Failed"
+}

packages/extension/src/ui/features/ledger/useLedgerApp.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState } from "react"
+import { Account } from "../accounts/Account"
+import { LedgerAlephium } from "../ledger/utils"
+import { LedgerState } from "./types"
+
+export function useLedgerApp({
+  selectedAccount,
+  unsignedTx,
+  onSubmit,
+  navigate,
+  onReject,
+} : {
+  selectedAccount: Account | undefined,
+  unsignedTx: string | undefined,
+  onSubmit: (signature: string) => void,
+  navigate: (n: number) => void,
+  onReject?: () => void
+}) {
+  const [ledgerState, setLedgerState] = useState<LedgerState>()
+  const [ledgerApp, setLedgerApp] = useState<LedgerAlephium>()
+
+  const ledgerSign = useCallback(async () => {
+    if (selectedAccount === undefined) {
+      return
+    }
+    setLedgerState(oldState => oldState === undefined ? "detecting" : oldState)
+
+    let app: LedgerAlephium | undefined
+    if (unsignedTx !== undefined) {
+      try {
+        app = await LedgerAlephium.create()
+        setLedgerApp(app)
+        setLedgerState("signing")
+        const signature = await app.signUnsignedTx(selectedAccount, Buffer.from(unsignedTx, "hex"))
+        setLedgerState("succeeded")
+        onSubmit(signature)
+      } catch (e) {
+        if (app === undefined) {
+          setLedgerState(oldState => oldState === undefined || oldState === "detecting" ? "notfound" : oldState)
+          setTimeout(ledgerSign, 1000)
+        } else {
+          await app.close()
+          setLedgerState("failed")
+          if (onReject !== undefined) {
+            onReject()
+          } else {
+            navigate(-1)
+          }
+        }
+      }
+    }
+  }, [selectedAccount, onSubmit, onReject, navigate, unsignedTx])
+
+  return { ledgerState, ledgerApp, ledgerSign }
+}