diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e1338a5c7b9..ac3b975e9fe 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.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 diff --git a/src/components/MultiHopTrade/hooks/useSupportedAssets.tsx b/src/components/MultiHopTrade/hooks/useSupportedAssets.tsx index 0dc8cf32336..0ca7520b448 100644 --- a/src/components/MultiHopTrade/hooks/useSupportedAssets.tsx +++ b/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, } diff --git a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx index eab3bf20270..95e737bd681 100644 --- a/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx +++ b/src/pages/ThorChainLP/components/AddLiquitity/AddLiquidityInput.tsx @@ -378,7 +378,7 @@ export const AddLiquidityInput: React.FC = ({ ) }, [asset, foundPool, rune, translate]) - const buyAssetSearch = useModal('sellAssetSearch') + const buyAssetSearch = useModal('buyAssetSearch') const handlePoolAssetClick = useCallback(() => { buyAssetSearch.open({ onClick: setAsset, diff --git a/src/state/apis/swappers/swappersApi.ts b/src/state/apis/swappers/swappersApi.ts index 2e925380b0a..61cd050d84c 100644 --- a/src/state/apis/swappers/swappersApi.ts +++ b/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,12 +233,10 @@ 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, @@ -249,14 +244,10 @@ export const swappersApi = createApi({ assets, ) - const supportedBuyAssetIds = sortedAssetIds.filter(assetId => - supportedBuyAssetsSet.has(assetId), - ) - return { data: { supportedSellAssetIds, - supportedBuyAssetIds, + supportedBuyAssetIds: Array.from(supportedBuyAssetsSet), }, } }, diff --git a/src/state/slices/common-selectors.ts b/src/state/slices/common-selectors.ts index 9a70a1c3615..7a6959b89d5 100644 --- a/src/state/slices/common-selectors.ts +++ b/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']) +}) diff --git a/src/state/slices/marketDataSlice/selectors.ts b/src/state/slices/marketDataSlice/selectors.ts index 97738137b5a..6313fd74656 100644 --- a/src/state/slices/marketDataSlice/selectors.ts +++ b/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,