feat: add support for ledger live and mew address path in ledger import

Author: iosh

packages/consts/index.js

@@ -113,6 +113,11 @@ export const ETH_SEPOLIA_EXPLORER_URL = 'https://sepolia.etherscan.io'
 export const DEFAULT_CFX_HDPATH = `m/44'/503'/0'/0`
 export const DEFAULT_ETH_HDPATH = `m/44'/60'/0'/0`
 
+// for ledger import address path
+export const LEDGER_LIVE_PATH = `m/44'/60'/0'/0/0`
+// for MEW or MyCrypto import address path
+export const MEW_PATH = `m/44'/60'/0'`
+
 export const REGENERATE = 'REGENERATE'
 
 export const CFX_LOCALNET_RPC_ENDPOINT = 'http://localhost:12537'

packages/ledger/const.js

@@ -34,6 +34,7 @@ export const INS = {
 export const HDPATH = {
   CONFLUX: "44'/503'/0'/0/",
   ETHEREUM: "44'/60'/0'/0/",
+  LEDGER_LIVE: "m/44'/60'/0'/0/0",
 }
 
 export const ERROR = {

packages/ledger/ethereum.js

@@ -169,16 +169,14 @@ export default class Ethereum {
     }
   }
 
-  async getAddressList(indexArray) {
+  async getAddressList(indexArray, path = HDPATH.ETHEREUM) {
     if (!Array.isArray(indexArray)) return []
-    const isNumber = indexArray.every(function (item) {
-      return typeof item === 'number'
-    })
+    const isNumber = indexArray.every(item => typeof item === 'number')
     if (!isNumber) return []
     const addressArr = []
     try {
       for (const index of indexArray) {
-        const hdPath = `${HDPATH.ETHEREUM}${index}`
+        const hdPath = this.getAddressesPathForIndex(index, path)
         const {address} = await this.getAddress(hdPath)
         addressArr.push({
           address,
@@ -224,4 +222,10 @@ export default class Ethereum {
     }
     return error
   }
+  getAddressesPathForIndex = (index, path) => {
+    if (path === HDPATH.LEDGER_LIVE) {
+      return `m/44'/60'/${index}'/0/0`
+    }
+    return `${path}/${index}`
+  }
 }

packages/popup/src/pages/ImportHwAccount/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import {useState, useEffect, useMemo} from 'react'
+import {useState, useEffect, useMemo, useCallback} from 'react'
 import {useAsync} from 'react-use'
 import {useSWRConfig} from 'swr'
 import {isUndefined} from '@fluent-wallet/checks'
@@ -17,7 +17,12 @@ import {
   CheckCircleFilled,
   QuestionCircleOutlined,
 } from '@fluent-wallet/component-icons'
-import {DEFAULT_CFX_HDPATH, DEFAULT_ETH_HDPATH} from '@fluent-wallet/consts'
+import {
+  DEFAULT_CFX_HDPATH,
+  DEFAULT_ETH_HDPATH,
+  LEDGER_LIVE_PATH,
+  MEW_PATH,
+} from '@fluent-wallet/consts'
 import {encode} from '@fluent-wallet/base32-address'
 import {TitleNav, CompWithLabel, Avatar, DisplayBalance} from '../../components'
 import {
@@ -34,12 +39,35 @@ import {useLedgerBindingApi} from '../../hooks'
 import useLoading from '../../hooks/useLoading'
 import useImportHWParams from './useImportHWParams'
 import {request} from '../../utils'
+import Dropdown from '@fluent-wallet/component-dropdown'
+import Menu from '../../../../ui/components/Menu'
+import MenuItem from '../../../../ui/components/Menu/MenuItem'
 
 const {
   WALLET_IMPORT_HARDWARE_WALLET_ACCOUNT_GROUP_OR_ACCOUNT,
   WALLETDB_REFETCH_BALANCE,
 } = RPC_METHODS
 
+const confluxLedgerPath = {
+  name: 'BIP 44 Standard',
+  value: DEFAULT_CFX_HDPATH,
+}
+
+const ethereumLedgerPath = [
+  {
+    name: 'BIP 44 Standard',
+    value: DEFAULT_ETH_HDPATH,
+  },
+  {
+    name: 'Ledger Live',
+    value: LEDGER_LIVE_PATH,
+  },
+  {
+    name: 'Legacy',
+    value: MEW_PATH,
+  },
+]
+
 function ImportingResults({importStatus}) {
   const {t} = useTranslation()
   const {mutate} = useSWRConfig()
@@ -114,14 +142,18 @@ function ImportHwAccount() {
   const {data: importedAddressData} = useQueryImportedAddress(networkId)
   const ledgerBindingApi = useLedgerBindingApi()
 
+  const [selectedPath, setSelectedPath] = useState()
+
   const {value: addressList, loading} = useAsync(async () => {
     let addresses = []
+    if (selectedPath === undefined) return addresses
     try {
       if (ledgerBindingApi) {
         addresses = await ledgerBindingApi.getAddressList(
           new Array(HARDWARE_ACCOUNT_PAGE_LIMIT)
             .fill('')
             .map((_item, index) => index + offset),
+          selectedPath?.value,
         )
       }
     } catch (e) {
@@ -138,7 +170,13 @@ function ImportHwAccount() {
           return {address: address?.toLowerCase?.(), hdPath}
         })
       : addresses
-  }, [offset, ledgerBindingApi])
+  }, [selectedPath, offset, ledgerBindingApi])
+
+  const handleSelectChange = useCallback(path => {
+    // if user change the hd path, reset the offset
+    setSelectedPath(path)
+    setOffset(0)
+  }, [])
 
   const {value: deviceInfo} = useAsync(async () => {
     if (ledgerBindingApi) {
@@ -183,6 +221,16 @@ function ImportHwAccount() {
     )
   }, [checkboxStatusObj])
 
+  useEffect(() => {
+    if (selectedPath === undefined) {
+      if (type === NETWORK_TYPE.CFX) {
+        setSelectedPath(confluxLedgerPath)
+      } else if (type === NETWORK_TYPE.ETH) {
+        setSelectedPath(ethereumLedgerPath[0])
+      }
+    }
+  }, [type, selectedPath])
+
   const onSelectAllAccount = () => {
     const ret = {}
     Object.keys(checkboxStatusObj).forEach(
@@ -278,17 +326,38 @@ function ImportHwAccount() {
           className="mt-5"
           label={<p className="text-sm text-gray-40">{t('hdPath')}</p>}
         >
-          <Input
-            value={`BIP 44 Standard(${
-              type === NETWORK_TYPE.CFX
-                ? DEFAULT_CFX_HDPATH
-                : DEFAULT_ETH_HDPATH
-            })`}
-            width="w-full box-border"
-            readOnly
-            className="pointer-events-none"
-            id="hd-path"
-          />
+          {type === NETWORK_TYPE.CFX ? (
+            <Input
+              value={`${confluxLedgerPath?.name}(${confluxLedgerPath?.value})`}
+              width="w-full box-border"
+              readOnly
+              className="pointer-events-none"
+              id="hd-path"
+            />
+          ) : (
+            <Dropdown
+              overlay={
+                <Menu>
+                  {ethereumLedgerPath.map(({name, value}) => (
+                    <MenuItem
+                      onClick={() => handleSelectChange({name, value})}
+                      selected={selectedPath?.value === value}
+                      containerClassName="w-full"
+                      key={value}
+                      itemKey={value}
+                    >{`${name}(${value})`}</MenuItem>
+                  ))}
+                </Menu>
+              }
+            >
+              <Input
+                value={`${selectedPath?.name}(${selectedPath?.value})`}
+                width="w-full box-border"
+                readOnly
+                id="hd-path"
+              />
+            </Dropdown>
+          )}
         </CompWithLabel>
         <CompWithLabel
           label={

packages/ui/components/Menu/MenuItem.js

@@ -10,6 +10,7 @@ function MenuItem({
   icon,
   onClick,
   disabled,
+  containerClassName = '',
 }) {
   const style = useMemo(() => {
     if (disabled) return 'text-gray-40 cursor-not-allowed'
@@ -37,7 +38,7 @@ function MenuItem({
       onClick={() => !disabled && onClick && onClick(itemKey)}
       className={`w-50 h-12 ${
         icon ? 'px-4' : 'pl-12 pr-4'
-      } flex items-center ${style}`}
+      } flex items-center ${style} ${containerClassName}`}
     >
       <div className="flex items-center flex-1">
         {iconComp}
@@ -74,6 +75,7 @@ MenuItem.propTypes = {
   icon: PropTypes.node,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
+  containerClassName: PropTypes.string,
 }
 
 export default MenuItem