fix: onramp receive addresses (#11080)

Author: NeOMakinG

src/components/MultiHopTrade/components/FiatRamps/FiatRampTrade.tsx

@@ -1,6 +1,5 @@
 import { useColorMode, usePrevious } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
-import { fromAccountId } from '@shapeshiftoss/caip'
 import type { Asset } from '@shapeshiftoss/types'
 import { useQueryClient } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
@@ -28,7 +27,7 @@ import { SharedTradeInput } from '@/components/MultiHopTrade/components/SharedTr
 import { SlideTransitionRoute } from '@/components/MultiHopTrade/components/SlideTransitionRoute'
 import type { CollapsibleQuoteListProps } from '@/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList'
 import { CollapsibleQuoteList } from '@/components/MultiHopTrade/components/TradeInput/components/CollapsibleQuoteList'
-import { getReceiveAddress } from '@/components/MultiHopTrade/hooks/useReceiveAddress'
+import { useReceiveAddress } from '@/components/MultiHopTrade/hooks/useReceiveAddress'
 import { TradeInputTab } from '@/components/MultiHopTrade/types'
 import { useDebounce } from '@/hooks/useDebounce/useDebounce'
 import { useModal } from '@/hooks/useModal/useModal'
@@ -91,7 +90,7 @@ const RampRoutes = memo(({ onChangeTab, direction }: RampRoutesProps) => {
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
   const {
-    state: { isConnected, wallet },
+    state: { isConnected },
   } = useWallet()
 
   const sellAsset = useAppSelector(selectInputSellAsset)
@@ -131,9 +130,11 @@ const RampRoutes = memo(({ onChangeTab, direction }: RampRoutesProps) => {
     selectPortfolioAccountMetadataByAccountId(state, buyAccountFilter),
   )
 
-  const walletReceiveAddress = useMemo(() => {
-    return buyAccountId ? fromAccountId(buyAccountId).account : undefined
-  }, [buyAccountId])
+  const { walletReceiveAddress } = useReceiveAddress({
+    sellAccountId: undefined,
+    buyAccountId,
+    buyAsset,
+  })
 
   const RampQuotesComponent = useCallback(
     (props: QuotesComponentProps) => {
@@ -337,22 +338,12 @@ const RampRoutes = memo(({ onChangeTab, direction }: RampRoutesProps) => {
         ramp: ramp.id,
       }
 
-      const receiveAddress =
-        direction === FiatRampAction.Buy && buyAccountMetadata
-          ? await getReceiveAddress({
-              asset: direction === FiatRampAction.Buy ? buyAsset : sellAsset,
-              wallet,
-              accountMetadata: buyAccountMetadata,
-              pubKey: walletReceiveAddress,
-            })
-          : undefined
-
       getMixPanel()?.track(MixPanelEvent.FiatRamp, mpData)
       const url = await ramp.onSubmit({
         action: direction,
         assetId:
           direction === FiatRampAction.Buy ? buyAsset?.assetId ?? '' : sellAsset?.assetId ?? '',
-        address: manualReceiveAddress ?? receiveAddress ?? '',
+        address: manualReceiveAddress ?? walletReceiveAddress ?? '',
         fiatCurrency:
           direction === FiatRampAction.Buy ? sellFiatCurrency.code : buyFiatCurrency.code,
         fiatAmount: direction === FiatRampAction.Buy ? buyFiatAmount : selectedQuote?.amount ?? '0',
@@ -384,7 +375,6 @@ const RampRoutes = memo(({ onChangeTab, direction }: RampRoutesProps) => {
       buyAccountMetadata,
       buyAsset,
       sellAsset,
-      wallet,
     ],
   )
 

src/components/MultiHopTrade/components/FiatRamps/FiatRampTradeFooter.tsx

@@ -1,6 +1,5 @@
 import type { CardFooterProps, FlexProps } from '@chakra-ui/react'
 import { CardFooter, Flex, useMediaQuery } from '@chakra-ui/react'
-import { fromAccountId } from '@shapeshiftoss/caip'
 import type { Asset } from '@shapeshiftoss/types'
 import noop from 'lodash/noop'
 import type { JSX } from 'react'
@@ -11,6 +10,7 @@ import { FiatRampAction } from '@/components/Modals/FiatRamps/FiatRampsCommon'
 import { RateGasRow } from '@/components/MultiHopTrade/components/RateGasRow'
 import { SharedRecipientAddress } from '@/components/MultiHopTrade/components/SharedTradeInput/SharedRecipientAddress'
 import { Protocol } from '@/components/MultiHopTrade/components/TradeInput/components/Protocol'
+import { useReceiveAddress } from '@/components/MultiHopTrade/hooks/useReceiveAddress'
 import { Text } from '@/components/Text'
 import { useDiscoverAccounts } from '@/context/AppProvider/hooks/useDiscoverAccounts'
 import { bnOrZero } from '@/lib/bignumber/bignumber'
@@ -97,17 +97,19 @@ export const FiatRampTradeFooter = ({
   const sellFiatCurrency = useAppSelector(selectSellFiatCurrency)
   const buyFiatCurrency = useAppSelector(selectBuyFiatCurrency)
 
+  const { walletReceiveAddress, isLoading: isWalletReceiveAddressLoading } = useReceiveAddress({
+    sellAccountId: undefined,
+    buyAccountId,
+    buyAsset,
+  })
+
   const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`, { ssr: false })
 
   const selectedQuote = useMemo(
     () => (direction === FiatRampAction.Buy ? selectedBuyQuote : selectedSellQuote),
     [direction, selectedBuyQuote, selectedSellQuote],
   )
 
-  const walletReceiveAddress = useMemo(() => {
-    return buyAccountId ? fromAccountId(buyAccountId).account : undefined
-  }, [buyAccountId])
-
   const { isFetching: isDiscoveringAccounts } = useDiscoverAccounts()
 
   const isLoading = useMemo(() => {
@@ -227,7 +229,7 @@ export const FiatRampTradeFooter = ({
         {direction === FiatRampAction.Buy && buyAsset && (
           <SharedRecipientAddress
             buyAsset={buyAsset}
-            isWalletReceiveAddressLoading={false}
+            isWalletReceiveAddressLoading={isWalletReceiveAddressLoading}
             walletReceiveAddress={walletReceiveAddress}
             manualReceiveAddress={manualReceiveAddress}
             onCancel={handleCancel}