From 9d1978ca8e0b9ae3881e79ed5a6dd3a139a8b18c Mon Sep 17 00:00:00 2001
From: Apotheosis <0xapotheosis@gmail.com>
Date: Mon, 20 May 2024 17:58:52 +1000
Subject: [PATCH] feat: prompt add ledger account (#6942)

---
 src/assets/translations/en/main.json                 |  1 +
 .../TradeInput/components/ManualAddressEntry.tsx     | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index cd1bbee9377..01bde821477 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -878,6 +878,7 @@
     "addressPlaceholder": "%{chainName} address",
     "priceImpactWarning": "Due to the size of this trade relative to available liquidity, the expected price impact of this trade is %{priceImpactPercentage}%. Are you sure you want to trade?",
     "enableMetaMaskSnap": "use the multichain snap",
+    "connectChain": "connect %{chainName}",
     "approvalGasFee": "Approval gas fee %{fee}",
     "approvalFailed": "A problem occurred during allowance approval",
     "tradeComplete": "You now have %{cryptoAmountFormatted} in your wallet on %{chainName}.",
diff --git a/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx b/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx
index 71b09105e93..8a70c16b10c 100644
--- a/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx
+++ b/src/components/MultiHopTrade/components/TradeInput/components/ManualAddressEntry.tsx
@@ -1,5 +1,6 @@
 import { FormControl, FormLabel, Link } from '@chakra-ui/react'
 import { isLedger } from '@shapeshiftoss/hdwallet-ledger'
+import { isMetaMask } from '@shapeshiftoss/hdwallet-metamask'
 import type { FC } from 'react'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useFormContext } from 'react-hook-form'
@@ -31,6 +32,7 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
   const translate = useTranslate()
   const isSnapEnabled = useFeatureFlag('Snaps')
   const { open: openSnapsModal } = useModal('snaps')
+  const { open: openManageAccountsModal } = useModal('manageAccounts')
 
   const wallet = useWallet().state.wallet
   const { chainId: buyAssetChainId, assetId: buyAssetAssetId } = useAppSelector(selectInputBuyAsset)
@@ -110,17 +112,23 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
   )
 
   const handleEnableShapeShiftSnap = useCallback(() => openSnapsModal({}), [openSnapsModal])
+  const handleAddAccount = useCallback(() => openManageAccountsModal({}), [openManageAccountsModal])
 
   const ManualReceiveAddressEntry: JSX.Element = useMemo(() => {
     return (
       <FormControl>
         <FormLabel color='yellow.400'>
           {translate('trade.receiveAddressDescription', { chainName: buyAssetChainName })}
-          {!isSnapInstalled && isSnapEnabled && (
+          {!isSnapInstalled && isSnapEnabled && wallet && isMetaMask(wallet) && (
             <Link textDecor='underline' ml={1} onClick={handleEnableShapeShiftSnap}>
               {translate('trade.enableMetaMaskSnap')}
             </Link>
           )}
+          {wallet && isLedger(wallet) && (
+            <Link textDecor='underline' ml={1} onClick={handleAddAccount}>
+              {translate('trade.connectChain', { chainName: buyAssetChainName })}
+            </Link>
+          )}
           &nbsp;{translate('trade.toContinue')}
         </FormLabel>
         <FormLabel color='white.500' w='full' fontWeight='bold'>
@@ -134,11 +142,13 @@ export const ManualAddressEntry: FC = memo((): JSX.Element | null => {
     )
   }, [
     buyAssetChainName,
+    handleAddAccount,
     handleEnableShapeShiftSnap,
     isSnapEnabled,
     isSnapInstalled,
     rules,
     translate,
+    wallet,
   ])
 
   return shouldShowManualReceiveAddressInput ? ManualReceiveAddressEntry : null