Merge branch 'develop' into feat_wire_up_confirmed_quote

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,10 +17,13 @@ If applicable, please link to the github issue and put `closes #XXXX` in your co
 closes #
 
 ## Risk
+> High Risk PRs Require 2 approvals
 
 <!-----------------------------------------------------------------------------
 Outline the scope of your changes and the risk associated with them. You must use your discretion as an engineer to determine the potential impact of your changes.
 
+WARNING: If your PR introduces a new on-chain transaction or modifies an existing one, please add the "High-Risk" label to this PR and ask for 2 reviewers to approve it before merging.
+
 E.g. an upgrade to `hdwallet` or core state management would be considered higher risk, and might require a full regression test. UI or isolated view changes, or something behind a feature flag may have near zero risk. Small bug fixes might require testing isolated to the specific fix.
 ------------------------------------------------------------------------------>
 

src/components/MultiHopTrade/hooks/useSupportedAssets.tsx

@@ -1,43 +1,53 @@
-import { KnownChainIds } from '@shapeshiftoss/types'
 import { useMemo } from 'react'
-import { useIsSnapInstalled } from 'hooks/useIsSnapInstalled/useIsSnapInstalled'
-import { useWallet } from 'hooks/useWallet/useWallet'
-import { walletSupportsChain } from 'hooks/useWalletSupportsChain/useWalletSupportsChain'
-import { isSome } from 'lib/utils'
 import { useGetSupportedAssetsQuery } from 'state/apis/swappers/swappersApi'
-import { selectAssetsSortedByMarketCapUserCurrencyBalanceAndName } from 'state/slices/common-selectors'
-import { selectAssets } from 'state/slices/selectors'
+import {
+  selectAssetsSortedByMarketCapUserCurrencyBalanceAndName,
+  selectAssetsSortedByName,
+  selectWalletSupportedChainIds,
+} from 'state/slices/common-selectors'
+import { selectMarketDataDidLoad } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 export const useSupportedAssets = () => {
-  const sortedAssets = useAppSelector(selectAssetsSortedByMarketCapUserCurrencyBalanceAndName)
-  const assets = useAppSelector(selectAssets)
-  const wallet = useWallet().state.wallet
-  const isSnapInstalled = useIsSnapInstalled()
+  const marketDataDidLoad = useAppSelector(selectMarketDataDidLoad)
+  const assetsSortedByName = useAppSelector(selectAssetsSortedByName)
+  const assetsSortedByMarketCapUserCurrencyBalanceAndName = useAppSelector(
+    selectAssetsSortedByMarketCapUserCurrencyBalanceAndName,
+  )
+
+  const sortedAssets = useMemo(() => {
+    // if the market data has not yet loaded once, return a simplified sorting of assets
+    if (!marketDataDidLoad) {
+      return assetsSortedByName
+    } else {
+      return assetsSortedByMarketCapUserCurrencyBalanceAndName
+    }
+  }, [assetsSortedByMarketCapUserCurrencyBalanceAndName, assetsSortedByName, marketDataDidLoad])
+
+  const walletSupportedChainIds = useAppSelector(selectWalletSupportedChainIds)
 
   const queryParams = useMemo(() => {
     return {
-      walletSupportedChainIds: Object.values(KnownChainIds).filter(chainId =>
-        walletSupportsChain({ chainId, wallet, isSnapInstalled }),
-      ),
-      sortedAssetIds: sortedAssets.map(asset => asset.assetId),
+      walletSupportedChainIds,
     }
-  }, [isSnapInstalled, sortedAssets, wallet])
+  }, [walletSupportedChainIds])
 
-  const { data, isLoading } = useGetSupportedAssetsQuery(queryParams)
+  const { data, isFetching } = useGetSupportedAssetsQuery(queryParams)
 
   const supportedSellAssets = useMemo(() => {
     if (!data) return []
-    return data.supportedSellAssetIds.map(assetId => assets[assetId]).filter(isSome)
-  }, [assets, data])
+    const assetIdsSet = new Set(data.supportedSellAssetIds)
+    return sortedAssets.filter(({ assetId }) => assetIdsSet.has(assetId))
+  }, [data, sortedAssets])
 
   const supportedBuyAssets = useMemo(() => {
     if (!data) return []
-    return data.supportedBuyAssetIds.map(assetId => assets[assetId]).filter(isSome)
-  }, [assets, data])
+    const assetIdsSet = new Set(data.supportedBuyAssetIds)
+    return sortedAssets.filter(({ assetId }) => assetIdsSet.has(assetId))
+  }, [data, sortedAssets])
 
   return {
-    isLoading,
+    isLoading: isFetching,
     supportedSellAssets,
     supportedBuyAssets,
   }

src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx

@@ -378,7 +378,7 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
     )
   }, [asset, foundPool, rune, translate])
 
-  const buyAssetSearch = useModal('sellAssetSearch')
+  const buyAssetSearch = useModal('buyAssetSearch')
   const handlePoolAssetClick = useCallback(() => {
     buyAssetSearch.open({
       onClick: setAsset,

src/state/apis/swappers/swappersApi.ts

@@ -219,13 +219,10 @@ export const swappersApi = createApi({
         supportedSellAssetIds: AssetId[]
         supportedBuyAssetIds: AssetId[]
       },
-      { walletSupportedChainIds: ChainId[]; sortedAssetIds: AssetId[] }
+      { walletSupportedChainIds: ChainId[] }
     >({
       queryFn: async (
-        {
-          walletSupportedChainIds,
-          sortedAssetIds,
-        }: { walletSupportedChainIds: ChainId[]; sortedAssetIds: AssetId[] },
+        { walletSupportedChainIds }: { walletSupportedChainIds: ChainId[] },
         { getState },
       ) => {
         const state = getState() as ReduxState
@@ -236,27 +233,21 @@ export const swappersApi = createApi({
         const sellAsset = selectSellAsset(state)
 
         const supportedSellAssetsSet = await getSupportedSellAssetIds(enabledSwappers, assets)
-        const supportedSellAssetIds = sortedAssetIds
-          .filter(assetId => supportedSellAssetsSet.has(assetId))
-          .filter(assetId => {
-            const chainId = fromAssetId(assetId).chainId
-            return walletSupportedChainIds.includes(chainId)
-          })
+        const supportedSellAssetIds = Array.from(supportedSellAssetsSet).filter(assetId => {
+          const chainId = fromAssetId(assetId).chainId
+          return walletSupportedChainIds.includes(chainId)
+        })
 
         const supportedBuyAssetsSet = await getSupportedBuyAssetIds(
           enabledSwappers,
           sellAsset,
           assets,
         )
 
-        const supportedBuyAssetIds = sortedAssetIds.filter(assetId =>
-          supportedBuyAssetsSet.has(assetId),
-        )
-
         return {
           data: {
             supportedSellAssetIds,
-            supportedBuyAssetIds,
+            supportedBuyAssetIds: Array.from(supportedBuyAssetsSet),
           },
         }
       },

src/state/slices/common-selectors.ts

@@ -164,3 +164,8 @@ export const selectAssetsSortedByMarketCapUserCurrencyBalanceAndName =
       )
     },
   )
+
+export const selectAssetsSortedByName = createDeepEqualOutputSelector(selectAssets, assets => {
+  const getAssetName = (asset: Asset) => asset.name
+  return orderBy(Object.values(assets).filter(isSome), [getAssetName], ['asc'])
+})

src/state/slices/marketDataSlice/selectors.ts

@@ -1,4 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit'
+import { QueryStatus } from '@reduxjs/toolkit/dist/query'
 import type { AssetId } from '@shapeshiftoss/caip'
 import type { HistoryData, HistoryTimeframe, MarketData } from '@shapeshiftoss/types'
 import createCachedSelector from 're-reselect'
@@ -13,6 +14,11 @@ import { selectSelectedCurrency } from 'state/slices/preferencesSlice/selectors'
 import { defaultMarketData } from './marketDataSlice'
 import type { MarketDataById } from './types'
 
+export const selectMarketDataDidLoad = (state: ReduxState) =>
+  Object.values(state.marketApi.queries).some(
+    query => query?.endpointName === 'findAll' && query?.status === QueryStatus.fulfilled,
+  )
+
 // TODO(woodenfurniture): rename this to clarify that prices are in USD not fiat
 export const selectCryptoMarketData = ((state: ReduxState) => state.marketData.crypto.byId) as (
   state: ReduxState,