Merge pull request #206 from alephium/update-ledger-sdk

Update ledger js sdk to latest version

packages/extension/locales/en-US/translation.json

@@ -238,7 +238,7 @@
   "Connect a new Ledger": "Connect a new Ledger",
   "Plug in and unlock your Ledger device": "Plug in and unlock your Ledger device",
   "Open (or install) the Alephium Ledger app": "Open (or install) the Alephium Ledger app",
-  "The Alephium Ledger app needs to be installed manually.": "The Alephium Ledger app needs to be installed manually.",
+  "The Alephium app can be installed via Ledger Live.": "The Alephium app can be installed via Ledger Live.",
   "More information here.": "More information here.",
   "Schnorr is not supported for Alephium's ledger app yet": "Schnorr is not supported for Alephium's ledger app yet",
   "Alephium Ledger app is not connected, please follow the instructions above": "Alephium Ledger app is not connected, please follow the instructions above",
@@ -345,5 +345,10 @@
   "Rejected": "Rejected",
   "Could not delete account": "Could not delete account",
   "Could not upgrade account": "Could not upgrade account",
-  "Invalid Seed Phrase": "Invalid Seed Phrase"
+  "Invalid Seed Phrase": "Invalid Seed Phrase",
+  "Verify in Ledger": "Verify in Ledger",
+  "Connect with Ledger": "Connect with Ledger",
+  "Failed to connect with Ledger, please try again": "Failed to connect with Ledger, please try again",
+  "Verify with Ledger": "Verify with Ledger",
+  "Failed to verify with Ledger, please try another device": "Failed to verify with Ledger, please try another device"
 }

packages/extension/package.json

@@ -5,13 +5,13 @@
   "license": "MIT",
   "devDependencies": {
     "@alephium/get-extension-wallet": "^1.2.2",
-    "@alephium/ledger-app": "^0.2.1",
+    "@alephium/ledger-app": "0.4.0",
     "@alephium/token-list": "0.0.19",
     "@alephium/web3": "^1.2.2",
     "@alephium/web3-test": "^1.2.2",
     "@alephium/web3-wallet": "^1.2.2",
-    "@ledgerhq/hw-transport-webusb": "6.27.17",
-    "@ledgerhq/hw-transport-webhid": "6.27.17",
+    "@ledgerhq/hw-transport-webusb": "6.29.0",
+    "@ledgerhq/hw-transport-webhid": "6.29.0",
     "@playwright/test": "^1.23.0",
     "@sentry/webpack-plugin": "^1.18.9",
     "@svgr/webpack": "^6.0.0",

packages/extension/src/ui/components/Icons/MuiIcons.ts

@@ -37,3 +37,4 @@ export { default as StarRounded } from "@mui/icons-material/StarRounded"
 export { default as VisibilityIcon } from "@mui/icons-material/Visibility"
 export { default as VisibilityOff } from "@mui/icons-material/VisibilityOff"
 export { default as WarningRoundedIcon } from "@mui/icons-material/WarningRounded"
+export { default as SafetyCheck } from "@mui/icons-material/SafetyCheck"

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

@@ -261,10 +261,7 @@ export const ApproveTransactionScreen: FC<ApproveTransactionScreenProps> = ({
           selectedAccount.signer.keyType,
           selectedAccount.signer.derivationIndex,
         )
-        const signature = await app.signHash(
-          path,
-          Buffer.from(buildResult.result.txId, "hex"),
-        )
+        const signature = await app.signUnsignedTx(path, Buffer.from(buildResult.result.unsignedTx, "hex"))
         setLedgerState("succeeded")
         onSubmit({ ...buildResult, signature })
         await app.close()

packages/extension/src/ui/features/funding/FundingQrCodeScreen.tsx

@@ -1,12 +1,12 @@
 import { AlertDialog, BarBackButton, BarCloseButton, NavigationContainer } from "@argent/ui"
-import { FC, useCallback, useRef, useState } from "react"
+import { FC, useCallback, useEffect, useRef, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import styled from "styled-components"
 
 import { AccountAddress, AccountName } from "../../components/Address"
 import { IconButton } from "../../components/Button"
 import { CopyIconButton } from "../../components/CopyIconButton"
-import { CheckCircleIcon, AddRoundedIcon } from "../../components/Icons/MuiIcons"
+import { CheckCircleIcon, AddRoundedIcon, SafetyCheck } from "../../components/Icons/MuiIcons"
 import { PageWrapper } from "../../components/Page"
 import { routes } from "../../routes"
 import { formatTruncatedAddress, normalizeAddress } from "../../services/addresses"
@@ -18,11 +18,12 @@ import {
 import { useSelectedAccount } from "../accounts/accounts.state"
 import { QrCode } from "./QrCode"
 import { testNodeWallet } from '@alephium/web3-test'
-import { web3 } from "@alephium/web3"
-import { defaultNetworks } from "../../../shared/network"
+import { getHDWalletPath } from "@alephium/web3-wallet"
 import { Flex } from "@chakra-ui/react"
 import i18n from "../../../i18n"
 import { useTranslation } from "react-i18next"
+import { getLedgerApp } from '../ledger/utils'
+import { set } from 'lodash-es'
 
 const Container = styled.div`
   padding: 0 20px;
@@ -47,6 +48,14 @@ const alterMessages = [
   {
     title: i18n.t("Request $ALPH"),
     message: i18n.t("The local Devnet is not available, please start one")
+  },
+  {
+    title: i18n.t("Connect with Ledger"),
+    message: i18n.t("Failed to connect with Ledger, please try again")
+  },
+  {
+    title: i18n.t("Verify with Ledger"),
+    message: i18n.t("Failed to verify with Ledger, please try another device")
   }
 ]
 
@@ -63,6 +72,8 @@ export const FundingQrCodeScreen: FC = () => {
   const [alertDialogIsOpen, setAlertDialogIsOpen] = useState(false)
   const [alterMessageIndex, setAlterMessageIndex] = useState(0)
 
+  const shouldShowLedgerVerify = account?.signer.type === 'ledger'
+
   /** Intercept 'copy' event and replace fragmented address with plain text address */
   const onCopyAddress = useCallback(
     (e: ClipboardEvent) => {
@@ -123,6 +134,30 @@ export const FundingQrCodeScreen: FC = () => {
     }
   }, [account?.address, account?.networkId, navigate])
 
+  const verifyLedger = useCallback(async () => {
+    if (account?.signer.type === 'ledger') {
+      const app = await getLedgerApp().catch((error) => {
+        console.error(`Failed in connecting with ledger`, error)
+        setAlterMessageIndex(2)
+        setAlertDialogIsOpen(true)
+        return null
+      })
+      if (!app) {
+        return
+      }
+      const path = getHDWalletPath(
+        account.signer.keyType,
+        account.signer.derivationIndex,
+      )
+      const [deviceAccount, _] = await app.getAccount(path, undefined, account.signer.keyType, true)
+      if (deviceAccount.address !== account.address) {
+        setAlterMessageIndex(3)
+        setAlertDialogIsOpen(true)
+      }
+      app.close()
+    }
+  }, [account])
+
   return (
     <NavigationContainer
       leftButton={<BarBackButton />}
@@ -147,11 +182,29 @@ export const FundingQrCodeScreen: FC = () => {
               ref={setAddressRef}
               aria-label={t("Full account address")}
             >
-              {formatTruncatedAddress(account.address, 6)}
+              {formatTruncatedAddress(account.address, 12)}
             </AccountAddress>
-            <StyledCopyIconButton size="s" copyValue={copyAccountAddress}>
-              {t("Copy address")}
-            </StyledCopyIconButton>
+            <div>
+              <StyledCopyIconButton size="s" copyValue={copyAccountAddress}>
+                {t("Copy address")}
+              </StyledCopyIconButton>
+            </div>
+            {
+              shouldShowLedgerVerify &&
+              <div>
+                <StyledIconButton
+                  size="s"
+                  icon={<SafetyCheck fontSize="inherit" />}
+                  clickedIcon={<CheckCircleIcon fontSize="inherit" />}
+                  clickedTimeout={5 * 60 * 1000}
+                  onClick={async () => {
+                    verifyLedger()
+                  }}
+                >
+                  {t("Verify with Ledger")}
+                </StyledIconButton>
+              </div>
+            }
             {account.networkId !== 'mainnet' &&
               <div>
                 <StyledIconButton

packages/extension/src/ui/features/ledger/start.tsx

@@ -63,7 +63,7 @@ export const LedgerStartScreen: FC = () => {
             { title: t("Plug in and unlock your Ledger device") },
             {
               title: t("Open (or install) the Alephium Ledger app"),
-              description: <>{t("The Alephium Ledger app needs to be installed manually.")} <A href="https://docs.alephium.org/wallet/ledger" target="_blank">{t("More information here.")}</A></>,
+              description: <>{t("The Alephium app can be installed via Ledger Live.")} <A href="https://docs.alephium.org/wallet/ledger" target="_blank">{t("More information here.")}</A></>,
             },
           ]}
           style={{ marginBottom: 8 }}