feat: upgrade swappers to support returning multiple quotes

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirm.tsx

@@ -157,21 +157,21 @@ export const TradeConfirm = () => {
   const getSellTxLink = useCallback(
     (sellTxHash: string) =>
       getTxLink({
-        name: tradeQuoteStep?.sources[0]?.name,
+        name: tradeQuoteStep?.source,
         defaultExplorerBaseUrl: tradeQuoteStep?.sellAsset.explorerTxLink ?? '',
         tradeId: sellTxHash,
       }),
-    [tradeQuoteStep?.sellAsset.explorerTxLink, tradeQuoteStep?.sources],
+    [tradeQuoteStep?.sellAsset.explorerTxLink, tradeQuoteStep?.source],
   )
 
   const getBuyTxLink = useCallback(
     (buyTxHash: string) =>
       getTxLink({
-        name: lastStep?.sources[0]?.name,
+        name: lastStep?.source,
         defaultExplorerBaseUrl: lastStep?.buyAsset.explorerTxLink ?? '',
         txId: buyTxHash,
       }),
-    [lastStep?.buyAsset.explorerTxLink, lastStep?.sources],
+    [lastStep?.buyAsset.explorerTxLink, lastStep?.source],
   )
 
   const txLink = useMemo(() => {
@@ -478,7 +478,12 @@ export const TradeConfirm = () => {
                     <RawText>{`1 ${sellAsset?.symbol ?? ''} = ${firstNonZeroDecimal(
                       bnOrZero(tradeQuoteStep?.rate),
                     )} ${buyAsset?.symbol}`}</RawText>
-                    {!!swapperName && <RawText color='text.subtle'>@{swapperName}</RawText>}
+                    {!!swapperName && (
+                      // This works because we currently only support Li.Fi trades with a single hop,
+                      // and Osmosis uses Osmosis as a source for its two hops
+                      // TODO(woodenfurniture): ensure we show the swapper name, not the first hop source, when we support multi-hop trades
+                      <RawText color='text.subtle'>@{tradeQuoteStep.source}</RawText>
+                    )}
                   </Box>
                 </Skeleton>
               </Row>

src/components/MultiHopTrade/components/TradeInput/components/TradeQuotes/TradeQuote.tsx

@@ -112,8 +112,8 @@ export const TradeQuoteLoaded: React.FC<TradeQuoteLoadedProps> = ({
   )
 
   const handleQuoteSelection = useCallback(() => {
-    dispatch(tradeQuoteSlice.actions.setSwapperName(quoteData.swapperName))
-  }, [dispatch, quoteData.swapperName])
+    dispatch(tradeQuoteSlice.actions.setActiveQuoteIndex(quoteData.index))
+  }, [dispatch, quoteData.index])
 
   const feeAsset = useAppSelector(state => selectFeeAssetByChainId(state, sellAsset.chainId ?? ''))
   if (!feeAsset)
@@ -236,7 +236,7 @@ export const TradeQuoteLoaded: React.FC<TradeQuoteLoadedProps> = ({
       <Flex justifyContent='space-between' alignItems='center'>
         <Flex gap={2} alignItems='center'>
           <SwapperIcon swapperName={quoteData.swapperName} />
-          <RawText>{quoteData.swapperName}</RawText>
+          <RawText>{quote?.steps[0].source ?? quoteData.swapperName}</RawText>
         </Flex>
         {quote && (
           <Amount.Crypto

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

@@ -1,7 +1,7 @@
 import { Collapse, Flex } from '@chakra-ui/react'
 import { memo, useMemo } from 'react'
 import type { ApiQuote } from 'state/apis/swappers'
-import { selectActiveSwapperName } from 'state/slices/tradeQuoteSlice/selectors'
+import { selectActiveQuoteIndex } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
 import { TradeQuote } from './TradeQuote'
@@ -12,29 +12,29 @@ type TradeQuotesProps = {
 }
 
 export const TradeQuotes: React.FC<TradeQuotesProps> = memo(({ isOpen, sortedQuotes }) => {
-  const activeSwapperName = useAppSelector(selectActiveSwapperName)
+  const activeQuoteIndex = useAppSelector(selectActiveQuoteIndex)
 
   const bestQuoteData = sortedQuotes[0]
 
   const quotes = useMemo(
     () =>
       sortedQuotes.map((quoteData, i) => {
-        const { swapperName } = quoteData
+        const { index } = quoteData
 
         // TODO(woodenfurniture): use quote ID when we want to support multiple quotes per swapper
-        const isActive = activeSwapperName === swapperName
+        const isActive = activeQuoteIndex === index
 
         return (
           <TradeQuote
             isActive={isActive}
             isBest={i === 0}
-            key={swapperName}
+            key={index}
             quoteData={quoteData}
             bestInputOutputRatio={bestQuoteData.inputOutputRatio}
           />
         )
       }),
-    [activeSwapperName, bestQuoteData, sortedQuotes],
+    [activeQuoteIndex, bestQuoteData, sortedQuotes],
   )
 
   return (

src/components/MultiHopTrade/helpers.ts

@@ -2,7 +2,7 @@ import { getMaybeCompositeAssetSymbol } from 'lib/mixpanel/helpers'
 import type { ReduxState } from 'state/reducer'
 import { selectAssets, selectWillDonate } from 'state/slices/selectors'
 import {
-  selectActiveSwapperName,
+  selectActiveQuoteIndex,
   selectBuyAmountBeforeFeesCryptoPrecision,
   selectFirstHopSellAsset,
   selectLastHopBuyAsset,
@@ -32,7 +32,7 @@ export const getMixpanelEventData = () => {
   const buyAmountBeforeFeesCryptoPrecision = selectBuyAmountBeforeFeesCryptoPrecision(state)
   const sellAmountBeforeFeesCryptoPrecision = selectSellAmountBeforeFeesCryptoPrecision(state)
   const willDonate = selectWillDonate(state)
-  const swapperName = selectActiveSwapperName(state)
+  const swapperName = selectActiveQuoteIndex(state)
 
   const compositeBuyAsset = getMaybeCompositeAssetSymbol(buyAsset.assetId, assets)
   const compositeSellAsset = getMaybeCompositeAssetSymbol(sellAsset.assetId, assets)

src/components/MultiHopTrade/hooks/useGetTradeQuotes/useGetTradeQuotes.tsx

@@ -162,15 +162,15 @@ export const useGetTradeQuotes = () => {
           if (isEqualExceptAffiliateBpsAndSlippage(tradeQuoteInput, updatedTradeQuoteInput)) {
             return
           } else {
-            dispatch(tradeQuoteSlice.actions.resetSwapperName())
+            dispatch(tradeQuoteSlice.actions.resetActiveQuoteIndex())
           }
         }
       })()
     } else {
       // if the quote input args changed, reset the selected swapper and update the trade quote args
       if (tradeQuoteInput !== skipToken) {
         setTradeQuoteInput(skipToken)
-        dispatch(tradeQuoteSlice.actions.resetSwapperName())
+        dispatch(tradeQuoteSlice.actions.resetActiveQuoteIndex())
       }
     }
   }, [

src/lib/getTxLink.ts

@@ -3,7 +3,7 @@ import type { SwapSource } from 'lib/swapper/api'
 import { SwapperName } from 'lib/swapper/api'
 
 type GetBaseUrl = {
-  name: SwapSource['name'] | Dex | undefined
+  name: SwapSource | Dex | undefined
   defaultExplorerBaseUrl: string
   isOrder?: boolean
 }

src/lib/swapper/api.ts

@@ -117,7 +117,7 @@ export type TradeBase<C extends ChainId> = {
   sellAmountIncludingProtocolFeesCryptoBaseUnit: string
   feeData: QuoteFeeData<C>
   rate: string
-  sources: SwapSource[]
+  source: SwapSource
   buyAsset: Asset
   sellAsset: Asset
   accountNumber: number
@@ -137,10 +137,7 @@ export type TradeQuote<C extends ChainId = ChainId> = {
   rate: string // top-level rate for all steps (i.e. output amount / input amount)
 }
 
-export type SwapSource = {
-  name: SwapperName | string
-  proportion: string
-}
+export type SwapSource = SwapperName | `${SwapperName} • ${string}`
 
 export enum SwapperName {
   Thorchain = 'THORChain',
@@ -237,6 +234,6 @@ export type Swapper2Api = {
   getTradeQuote: (
     input: GetTradeQuoteInput,
     deps: TradeQuoteDeps,
-  ) => Promise<Result<TradeQuote2, SwapErrorRight>>
+  ) => Promise<Result<TradeQuote2[], SwapErrorRight>>
   getUnsignedTx(input: GetUnsignedTxArgs): Promise<UnsignedTx2>
 }

src/lib/swapper/swapper.ts

@@ -21,7 +21,7 @@ export const getTradeQuotes = async (
     swappers
       .filter(({ swapperName }) => enabledSwappers.includes(swapperName))
       .map(({ swapperName, swapper }) =>
-        timeout<TradeQuote2, SwapErrorRight>(
+        timeout<TradeQuote2[], SwapErrorRight>(
           swapper.getTradeQuote(getTradeQuoteInput, deps),
           QUOTE_TIMEOUT_MS,
           QUOTE_TIMEOUT_ERROR,

src/lib/swapper/swappers/CowSwapper/endpoints.ts

@@ -47,7 +47,7 @@ export const cowApi: Swapper2Api = {
   getTradeQuote: async (
     input: GetTradeQuoteInput,
     { sellAssetUsdRate, buyAssetUsdRate }: { sellAssetUsdRate: string; buyAssetUsdRate: string },
-  ): Promise<Result<TradeQuote2, SwapErrorRight>> => {
+  ): Promise<Result<TradeQuote2[], SwapErrorRight>> => {
     const tradeQuoteResult = await getCowSwapTradeQuote(input as GetEvmTradeQuoteInput, {
       sellAssetUsdRate,
       buyAssetUsdRate,
@@ -57,7 +57,7 @@ export const cowApi: Swapper2Api = {
     return tradeQuoteResult.map(tradeQuote => {
       const id = uuid()
       tradeQuoteMetadata.set(id, { chainId: tradeQuote.steps[0].sellAsset.chainId as EvmChainId })
-      return { id, receiveAddress, affiliateBps: undefined, ...tradeQuote }
+      return [{ id, receiveAddress, affiliateBps: undefined, ...tradeQuote }]
     })
   },
 

src/lib/swapper/swappers/CowSwapper/getCowSwapTradeQuote/getCowSwapTradeQuote.test.ts

@@ -110,7 +110,7 @@ const expectedTradeQuoteWethToFox: TradeQuote<KnownChainIds.EthereumMainnet> = {
       },
       sellAmountIncludingProtocolFeesCryptoBaseUnit: '1000000000000000000',
       buyAmountBeforeFeesCryptoBaseUnit: '14913256100953839475750', // 14913 FOX
-      sources: [{ name: SwapperName.CowSwap, proportion: '1' }],
+      source: SwapperName.CowSwap,
       buyAsset: FOX_MAINNET,
       sellAsset: WETH,
       accountNumber: 0,
@@ -137,7 +137,7 @@ const expectedTradeQuoteFoxToEth: TradeQuote<KnownChainIds.EthereumMainnet> = {
       },
       sellAmountIncludingProtocolFeesCryptoBaseUnit: '1000000000000000000000',
       buyAmountBeforeFeesCryptoBaseUnit: '51242479117266593',
-      sources: [{ name: SwapperName.CowSwap, proportion: '1' }],
+      source: SwapperName.CowSwap,
       buyAsset: ETH,
       sellAsset: FOX_MAINNET,
       accountNumber: 0,
@@ -164,7 +164,7 @@ const expectedTradeQuoteUsdcToXdai: TradeQuote<KnownChainIds.GnosisMainnet> = {
       },
       sellAmountIncludingProtocolFeesCryptoBaseUnit: '20000000',
       buyAmountBeforeFeesCryptoBaseUnit: '21006555357465608755',
-      sources: [{ name: SwapperName.CowSwap, proportion: '1' }],
+      source: SwapperName.CowSwap,
       buyAsset: XDAI,
       sellAsset: USDC_GNOSIS,
       accountNumber: 0,
@@ -191,7 +191,7 @@ const expectedTradeQuoteSmallAmountWethToFox: TradeQuote<KnownChainIds.EthereumM
       },
       sellAmountIncludingProtocolFeesCryptoBaseUnit: '1000000000000',
       buyAmountBeforeFeesCryptoBaseUnit: '165590332317788059940', // 165.59 FOX
-      sources: [{ name: SwapperName.CowSwap, proportion: '1' }],
+      source: SwapperName.CowSwap,
       buyAsset: FOX_MAINNET,
       sellAsset: WETH,
       accountNumber: 0,

src/lib/swapper/swappers/CowSwapper/getCowSwapTradeQuote/getCowSwapTradeQuote.ts

@@ -5,12 +5,12 @@ import type { AxiosError } from 'axios'
 import { getConfig } from 'config'
 import { bn } from 'lib/bignumber/bignumber'
 import type { GetTradeQuoteInput, SwapErrorRight, TradeQuote } from 'lib/swapper/api'
+import { SwapperName } from 'lib/swapper/api'
 import type { CowChainId, CowSwapQuoteResponse } from 'lib/swapper/swappers/CowSwapper/types'
 import {
   COW_SWAP_NATIVE_ASSET_MARKER_ADDRESS,
   COW_SWAP_VAULT_RELAYER_ADDRESS,
   DEFAULT_APP_DATA,
-  DEFAULT_SOURCE,
   ORDER_KIND_SELL,
 } from 'lib/swapper/swappers/CowSwapper/utils/constants'
 import { cowService } from 'lib/swapper/swappers/CowSwapper/utils/cowService'
@@ -115,7 +115,7 @@ export async function getCowSwapTradeQuote(
         },
         sellAmountIncludingProtocolFeesCryptoBaseUnit: normalizedSellAmountCryptoBaseUnit,
         buyAmountBeforeFeesCryptoBaseUnit,
-        sources: DEFAULT_SOURCE,
+        source: SwapperName.CowSwap,
         buyAsset,
         sellAsset,
         accountNumber,

src/lib/swapper/swappers/CowSwapper/utils/constants.ts

@@ -1,6 +1,5 @@
 import { AddressZero } from '@ethersproject/constants'
 import { KnownChainIds } from '@shapeshiftoss/types'
-import { SwapperName } from 'lib/swapper/api'
 
 import type { CowChainId } from '../types'
 
@@ -9,7 +8,6 @@ export const MIN_COWSWAP_USD_TRADE_VALUES_BY_CHAIN_ID: Record<CowChainId, string
   [KnownChainIds.GnosisMainnet]: '0.01',
 }
 
-export const DEFAULT_SOURCE = [{ name: SwapperName.CowSwap, proportion: '1' }]
 export const DEFAULT_ADDRESS = AddressZero
 export const DEFAULT_APP_DATA = '0x68a7b5781dfe48bd5d7aeb11261c17517f5c587da682e4fade9b6a00a59b8970'
 export const COW_SWAP_VAULT_RELAYER_ADDRESS = '0xc92e8bdf79f0507f65a392b0ab4667716bfe0110'

src/lib/swapper/swappers/LifiSwapper/endpoints.ts

@@ -19,17 +19,21 @@ import { createDefaultStatusResponse } from 'lib/utils/evm'
 
 import { getTradeQuote } from './getTradeQuote/getTradeQuote'
 import { getLifiChainMap } from './utils/getLifiChainMap'
+import { getLifiToolsMap } from './utils/getLifiToolsMap'
 import { getUnsignedTx } from './utils/getUnsignedTx/getUnsignedTx'
+import type { LifiTool } from './utils/types'
 
 const tradeQuoteMetadata: Map<string, Route> = new Map()
 
-let lifiChainMapPromise: Promise<Result<Map<ChainId, ChainKey>, SwapErrorRight>> | undefined
+// cached metadata - would need persistent cache with expiry if moved server-side
+let lifiChainMapPromise: Promise<Map<ChainId, ChainKey>> | undefined
+let lifiToolsMapPromise: Promise<Map<string, LifiTool>> | undefined
 
 export const lifiApi: Swapper2Api = {
   getTradeQuote: async (
     input: GetTradeQuoteInput,
     { assets }: TradeQuoteDeps,
-  ): Promise<Result<TradeQuote2, SwapErrorRight>> => {
+  ): Promise<Result<TradeQuote2[], SwapErrorRight>> => {
     if (input.sellAmountIncludingProtocolFeesCryptoBaseUnit === '0') {
       return Err(
         makeSwapErrorRight({
@@ -38,31 +42,37 @@ export const lifiApi: Swapper2Api = {
         }),
       )
     }
-    if (lifiChainMapPromise === undefined) lifiChainMapPromise = getLifiChainMap()
 
-    const maybeLifiChainMap = await lifiChainMapPromise
+    if (lifiChainMapPromise === undefined) lifiChainMapPromise = getLifiChainMap()
+    if (lifiToolsMapPromise === undefined) lifiToolsMapPromise = getLifiToolsMap()
 
-    if (maybeLifiChainMap.isErr()) return Err(maybeLifiChainMap.unwrapErr())
+    const [lifiChainMap, lifiToolsMap] = await Promise.all([
+      lifiChainMapPromise,
+      lifiToolsMapPromise,
+    ])
 
     const tradeQuoteResult = await getTradeQuote(
       input as GetEvmTradeQuoteInput,
-      maybeLifiChainMap.unwrap(),
+      lifiChainMap,
+      lifiToolsMap,
       assets,
     )
     const { receiveAddress } = input
 
-    return tradeQuoteResult.map(({ selectedLifiRoute, ...tradeQuote }) => {
-      // TODO: quotes below the minimum arent valid and should not be processed as such
-      // selectedLifiRoute willbe missing for quotes below the minimum
-      if (!selectedLifiRoute) throw Error('missing selectedLifiRoute')
+    return tradeQuoteResult.map(quote =>
+      quote.map(({ selectedLifiRoute, ...tradeQuote }) => {
+        // TODO: quotes below the minimum aren't valid and should not be processed as such
+        // selectedLifiRoute will be missing for quotes below the minimum
+        if (!selectedLifiRoute) throw Error('missing selectedLifiRoute')
 
-      const id = selectedLifiRoute.id
+        const id = selectedLifiRoute.id
 
-      // store the lifi quote metadata for transaction building later
-      tradeQuoteMetadata.set(id, selectedLifiRoute)
+        // store the lifi quote metadata for transaction building later
+        tradeQuoteMetadata.set(id, selectedLifiRoute)
 
-      return { id, receiveAddress, affiliateBps: undefined, ...tradeQuote }
-    })
+        return { id, receiveAddress, affiliateBps: undefined, ...tradeQuote }
+      }),
+    )
   },
 
   getUnsignedTx: async ({ from, tradeQuote, stepIndex }: GetUnsignedTxArgs): Promise<ETHSignTx> => {