feat: ledger fixes and improvements

package.json

@@ -93,20 +93,20 @@
     "@shapeshiftoss/caip": "workspace:^",
     "@shapeshiftoss/chain-adapters": "workspace:^",
     "@shapeshiftoss/errors": "workspace:^",
-    "@shapeshiftoss/hdwallet-coinbase": "^1.52.2",
-    "@shapeshiftoss/hdwallet-core": "^1.52.2",
-    "@shapeshiftoss/hdwallet-keepkey": "^1.52.2",
-    "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.52.2",
-    "@shapeshiftoss/hdwallet-keplr": "^1.52.2",
-    "@shapeshiftoss/hdwallet-ledger": "^1.52.2",
-    "@shapeshiftoss/hdwallet-ledger-webhid": "^1.52.2",
-    "@shapeshiftoss/hdwallet-ledger-webusb": "^1.52.2",
-    "@shapeshiftoss/hdwallet-metamask": "^1.52.2",
-    "@shapeshiftoss/hdwallet-native": "^1.52.2",
-    "@shapeshiftoss/hdwallet-native-vault": "^1.52.2",
-    "@shapeshiftoss/hdwallet-shapeshift-multichain": "^1.52.2",
-    "@shapeshiftoss/hdwallet-walletconnectv2": "^1.52.2",
-    "@shapeshiftoss/hdwallet-xdefi": "^1.52.2",
+    "@shapeshiftoss/hdwallet-coinbase": "1.52.5",
+    "@shapeshiftoss/hdwallet-core": "1.52.5",
+    "@shapeshiftoss/hdwallet-keepkey": "1.52.5",
+    "@shapeshiftoss/hdwallet-keepkey-webusb": "1.52.5",
+    "@shapeshiftoss/hdwallet-keplr": "1.52.5",
+    "@shapeshiftoss/hdwallet-ledger": "1.52.5",
+    "@shapeshiftoss/hdwallet-ledger-webhid": "1.52.5",
+    "@shapeshiftoss/hdwallet-ledger-webusb": "1.52.5",
+    "@shapeshiftoss/hdwallet-metamask": "1.52.5",
+    "@shapeshiftoss/hdwallet-native": "1.52.5",
+    "@shapeshiftoss/hdwallet-native-vault": "1.52.5",
+    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.52.5",
+    "@shapeshiftoss/hdwallet-walletconnectv2": "1.52.5",
+    "@shapeshiftoss/hdwallet-xdefi": "1.52.5",
     "@shapeshiftoss/types": "workspace:^",
     "@shapeshiftoss/unchained-client": "workspace:^",
     "@sniptt/monads": "^0.5.10",

packages/chain-adapters/src/evm/EvmBaseAdapter.ts

@@ -554,9 +554,9 @@ export abstract class EvmBaseAdapter<T extends EvmChainId> implements IChainAdap
     onMessage: (msg: Transaction) => void,
     onError: (err: SubscribeError) => void,
   ): Promise<void> {
-    const { accountNumber, wallet } = input
+    const { pubKey, accountNumber, wallet } = input
 
-    const address = await this.getAddress({ accountNumber, wallet })
+    const address = await this.getAddress({ accountNumber, wallet, pubKey })
     const bip44Params = this.getBIP44Params({ accountNumber })
     const subscriptionId = toRootDerivationPath(bip44Params)
 

packages/chain-adapters/src/types.ts

@@ -87,6 +87,7 @@ export type SubscribeTxsInput = {
   wallet: HDWallet
   accountNumber: number
   accountType?: UtxoAccountType
+  pubKey?: string
 }
 
 export type GetBIP44ParamsInput = {

packages/chain-adapters/src/utxo/UtxoBaseAdapter.ts

@@ -537,8 +537,9 @@ export abstract class UtxoBaseAdapter<T extends UtxoChainId> implements IChainAd
     const { wallet, accountNumber, accountType = this.defaultUtxoAccountType } = input
 
     const bip44Params = this.getBIP44Params({ accountNumber, accountType })
-    const { xpub } = await this.getPublicKey(wallet, accountNumber, accountType)
-    const account = await this.getAccount(xpub)
+    const account = await this.getAccount(
+      input.pubKey ?? (await this.getPublicKey(wallet, accountNumber, accountType)).xpub,
+    )
     const addresses = (account.chainSpecific.addresses ?? []).map(address => address.pubkey)
     const subscriptionId = `${toRootDerivationPath(bip44Params)}/${accountType}`
 

react-app-rewired/headers/csps/ledger.ts

@@ -0,0 +1,10 @@
+import type { Csp } from '../types'
+
+// Ledger hw-app-eth's needs to connect to Ledger CDN for signing. This is sad, but required.
+export const csp: Csp = {
+  // https://github.com/LedgerHQ/ledger-live/blob/e7129059b4d86378da55c0c8745219da88877e14/libs/ledgerjs/packages/hw-app-eth/src/services/ledger/index.ts#L53
+  'connect-src': [
+    'https://cdn.live.ledger.com/cryptoassets/evm/100/erc20-signatures.json',
+    'https://cdn.live.ledger.com/plugins/ethereum.json',
+  ],
+}

src/components/Modals/Receive/ReceiveInfo.tsx

@@ -110,7 +110,9 @@ export const ReceiveInfo = ({ asset, accountId }: ReceivePropsType) => {
       accountNumber,
     })
 
-    setVerified(Boolean(deviceAddress) && deviceAddress === receiveAddress)
+    setVerified(
+      Boolean(deviceAddress) && deviceAddress.toLowerCase() === receiveAddress.toLowerCase(),
+    )
   }
 
   const translate = useTranslate()

src/components/MultiHopTrade/MultiHopTrade.tsx

@@ -14,9 +14,15 @@ import { useAppDispatch, useAppSelector } from 'state/store'
 import { Approval } from './components/Approval/Approval'
 import { TradeConfirm } from './components/TradeConfirm/TradeConfirm'
 import { TradeInput } from './components/TradeInput/TradeInput'
+import { VerifyAddresses } from './components/VerifyAddresses/VerifyAddresses'
 import { TradeRoutePaths } from './types'
 
-const MultiHopEntries = [TradeRoutePaths.Input, TradeRoutePaths.Approval, TradeRoutePaths.Confirm]
+const MultiHopEntries = [
+  TradeRoutePaths.Input,
+  TradeRoutePaths.Approval,
+  TradeRoutePaths.Confirm,
+  TradeRoutePaths.VerifyAddresses,
+]
 
 export type TradeCardProps = {
   defaultBuyAssetId?: AssetId
@@ -94,6 +100,9 @@ const MultiHopRoutes = memo(() => {
         <Route key={TradeRoutePaths.Approval} path={TradeRoutePaths.Approval}>
           <Approval />
         </Route>
+        <Route key={TradeRoutePaths.VerifyAddresses} path={TradeRoutePaths.VerifyAddresses}>
+          <VerifyAddresses />
+        </Route>
       </Switch>
     </AnimatePresence>
   )

src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx

@@ -12,6 +12,7 @@ import {
   Tooltip,
   useToken,
 } from '@chakra-ui/react'
+import { isLedger } from '@shapeshiftoss/hdwallet-ledger'
 import { AnimatePresence } from 'framer-motion'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import type { ColorFormat } from 'react-countdown-circle-timer'
@@ -211,6 +212,11 @@ export const TradeInput = memo(() => {
 
       const isApprovalNeeded = await checkApprovalNeeded(tradeQuoteStep, wallet)
 
+      if (isLedger(wallet)) {
+        history.push({ pathname: TradeRoutePaths.VerifyAddresses })
+        return
+      }
+
       if (isApprovalNeeded) {
         history.push({ pathname: TradeRoutePaths.Approval })
         return

src/components/MultiHopTrade/components/VerifyAddresses/VerifyAddresses.tsx

@@ -0,0 +1,232 @@
+import {
+  Box,
+  Button,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Flex,
+  Text as CText,
+} from '@chakra-ui/react'
+import { CHAIN_NAMESPACE, fromAccountId, fromChainId } from '@shapeshiftoss/caip'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useHistory } from 'react-router'
+import { useAccountIds } from 'components/MultiHopTrade/hooks/useAccountIds'
+import { checkApprovalNeeded } from 'components/MultiHopTrade/hooks/useAllowanceApproval/helpers'
+import { getReceiveAddress } from 'components/MultiHopTrade/hooks/useReceiveAddress'
+import { TradeRoutePaths } from 'components/MultiHopTrade/types'
+import { Row } from 'components/Row/Row'
+import { SlideTransition } from 'components/SlideTransition'
+import { Text } from 'components/Text'
+import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
+import { useWallet } from 'hooks/useWallet/useWallet'
+import {
+  selectBuyAsset,
+  selectPortfolioAccountMetadataByAccountId,
+  selectSellAsset,
+} from 'state/slices/selectors'
+import { selectFirstHop } from 'state/slices/tradeQuoteSlice/selectors'
+import { useAppSelector } from 'state/store'
+
+export const VerifyAddresses = () => {
+  const wallet = useWallet().state.wallet
+  const history = useHistory()
+
+  const [sellAddress, setSellAddress] = useState<string | undefined>()
+  const [buyAddress, setBuyAddress] = useState<string | undefined>()
+  const [isSellVerifying, setIsSellVerifying] = useState(false)
+  const [isBuyVerifying, setIsBuyVerifying] = useState(false)
+
+  const [sellVerified, setSellVerified] = useState(false)
+  const [buyVerified, setBuyVerified] = useState(false)
+
+  const buyAsset = useAppSelector(selectBuyAsset)
+  const sellAsset = useAppSelector(selectSellAsset)
+  const tradeQuoteStep = useAppSelector(selectFirstHop)
+
+  const { sellAssetAccountId, buyAssetAccountId } = useAccountIds()
+
+  const sellAccountFilter = useMemo(
+    () => ({ accountId: sellAssetAccountId ?? '' }),
+    [sellAssetAccountId],
+  )
+  const sellAccountMetadata = useAppSelector(state =>
+    selectPortfolioAccountMetadataByAccountId(state, sellAccountFilter),
+  )
+  const buyAccountFilter = useMemo(
+    () => ({ accountId: buyAssetAccountId ?? '' }),
+    [buyAssetAccountId],
+  )
+  const buyAccountMetadata = useAppSelector(state =>
+    selectPortfolioAccountMetadataByAccountId(state, buyAccountFilter),
+  )
+
+  const handleContinue = useCallback(async () => {
+    if (!tradeQuoteStep) throw Error('missing tradeQuoteStep')
+    if (!wallet) throw Error('missing wallet')
+
+    const isApprovalNeeded = await checkApprovalNeeded(tradeQuoteStep, wallet)
+    if (isApprovalNeeded) {
+      history.push({ pathname: TradeRoutePaths.Approval })
+      return
+    }
+
+    history.push({ pathname: TradeRoutePaths.Confirm })
+  }, [history, tradeQuoteStep, wallet])
+
+  const fetchAddresses = useCallback(async () => {
+    if (
+      !wallet ||
+      !sellAssetAccountId ||
+      !buyAssetAccountId ||
+      !sellAccountMetadata ||
+      !buyAccountMetadata
+    )
+      return
+
+    const deviceId = await wallet.getDeviceID()
+
+    const fetchedSellAddress = await getReceiveAddress({
+      asset: sellAsset,
+      wallet,
+      deviceId,
+      accountMetadata: sellAccountMetadata,
+      pubKey: fromAccountId(sellAssetAccountId).account,
+    })
+    const fetchedBuyAddress = await getReceiveAddress({
+      asset: buyAsset,
+      wallet,
+      deviceId,
+      accountMetadata: buyAccountMetadata,
+      pubKey: fromAccountId(buyAssetAccountId).account,
+    })
+
+    setSellAddress(fetchedSellAddress)
+    setBuyAddress(fetchedBuyAddress)
+  }, [
+    wallet,
+    sellAssetAccountId,
+    buyAssetAccountId,
+    sellAccountMetadata,
+    buyAccountMetadata,
+    sellAsset,
+    buyAsset,
+  ])
+
+  useEffect(() => {
+    fetchAddresses()
+  }, [fetchAddresses])
+
+  const handleVerify = useCallback(
+    async (type: 'sell' | 'buy') => {
+      if (type === 'sell') {
+        setIsSellVerifying(true)
+      } else if (type === 'buy') {
+        setIsBuyVerifying(true)
+      }
+
+      try {
+        const asset = type === 'sell' ? sellAsset : buyAsset
+        const accountMetadata = type === 'sell' ? sellAccountMetadata : buyAccountMetadata
+        const _address = type === 'sell' ? sellAddress : buyAddress
+
+        if (!asset || !accountMetadata || !_address || !wallet) return
+
+        const { chainId } = asset
+        const adapter = getChainAdapterManager().get(chainId)
+
+        if (!adapter) return
+
+        const { bip44Params } = accountMetadata
+
+        const { chainNamespace } = fromChainId(asset.chainId)
+        if (CHAIN_NAMESPACE.Utxo === chainNamespace && !accountMetadata.accountType) return
+
+        const deviceAddress = await adapter.getAddress({
+          wallet,
+          showOnDevice: true,
+          accountType: accountMetadata.accountType,
+          accountNumber: bip44Params.accountNumber,
+        })
+
+        if (deviceAddress && deviceAddress.toLowerCase() === _address.toLowerCase()) {
+          if (type === 'sell') {
+            setSellVerified(true)
+          } else if (type === 'buy') {
+            setBuyVerified(true)
+          }
+        }
+      } catch (e) {
+        console.error(e)
+      } finally {
+        if (type === 'sell') {
+          setIsSellVerifying(false)
+        } else if (type === 'buy') {
+          setIsBuyVerifying(false)
+        }
+      }
+    },
+    [sellAsset, buyAsset, sellAccountMetadata, buyAccountMetadata, sellAddress, buyAddress, wallet],
+  )
+
+  return (
+    <SlideTransition>
+      <Box>
+        <CardHeader>
+          <CText fontSize='xl' fontWeight='bold' mb={4}>
+            Verify Addresses
+          </CText>
+        </CardHeader>
+        <CardBody>
+          <Row my={3}>
+            <Row.Label fontWeight='medium'>
+              <CText>Buy Address:</CText>
+            </Row.Label>
+            <Row.Value flex={1} mr={4} fontWeight='light' wordBreak='break-all'>
+              {buyAddress || 'Fetching...'}
+            </Row.Value>
+            <Button
+              colorScheme={buyVerified ? 'green' : 'blue'}
+              onClick={() => handleVerify('buy')}
+              isDisabled={buyVerified}
+              isLoading={isBuyVerifying}
+            >
+              {buyVerified ? 'Verified' : 'Verify'}
+            </Button>
+          </Row>
+          <Row my={3}>
+            <Row.Label fontWeight='medium'>
+              <CText>Sell Address:</CText>
+            </Row.Label>
+            <Row.Value flex={1} mr={4} fontWeight='light' wordBreak='break-all'>
+              {sellAddress || 'Fetching...'}
+            </Row.Value>
+            <Button
+              colorScheme={sellVerified ? 'green' : 'blue'}
+              onClick={() => handleVerify('sell')}
+              isDisabled={sellVerified}
+              isLoading={isSellVerifying}
+            >
+              {sellVerified ? 'Verified' : 'Verify'}
+            </Button>
+          </Row>
+        </CardBody>
+        <CardFooter mt={4}>
+          <Flex direction='column' alignItems='center' justifyContent='space-between' width='full'>
+            <CText color='red.500' textAlign='center' mb={4}>
+              Ensure your addresses are correct before proceeding.
+            </CText>
+
+            <Button
+              onClick={handleContinue}
+              size='lg'
+              isDisabled={!(sellVerified && buyVerified)}
+              width='full'
+            >
+              <Text translation='common.continue' />
+            </Button>
+          </Flex>
+        </CardFooter>
+      </Box>
+    </SlideTransition>
+  )
+}