feat: markets page recommended tab and Portals assets

src/lib/market-service/portals/portals.ts

@@ -1,7 +1,6 @@
 import type { ChainId } from '@shapeshiftoss/caip'
 import { ASSET_NAMESPACE, bscChainId, fromAssetId, toAssetId } from '@shapeshiftoss/caip'
 import type {
-  AssetsByIdPartial,
   FindAllMarketArgs,
   HistoryData,
   MarketCapResult,
@@ -22,7 +21,6 @@ import { CHAIN_ID_TO_PORTALS_NETWORK } from 'lib/portals/constants'
 import type { GetTokensResponse, HistoryResponse } from 'lib/portals/types'
 import { assertUnreachable, getTimeFrameBounds, isToken } from 'lib/utils'
 
-import generatedAssetData from '../../asset-service/service/generatedAssetData.json'
 import type { MarketService } from '../api'
 import { DEFAULT_CACHE_TTL_MS } from '../config'
 import { isValidDate } from '../utils/isValidDate'
@@ -115,11 +113,7 @@ export class PortalsMarketService implements MarketService {
     }
   }
   async findByAssetId({ assetId }: MarketDataArgs): Promise<MarketData | null> {
-    const assets = generatedAssetData as unknown as AssetsByIdPartial
-
     try {
-      const asset = assets[assetId]
-      if (!asset) return null
       const { chainId, assetReference } = fromAssetId(assetId)
 
       const network = CHAIN_ID_TO_PORTALS_NETWORK[chainId]

src/pages/Markets/Recommended.tsx

@@ -1,15 +1,14 @@
 import { Box, Flex, Grid, GridItem, Heading, Text } from '@chakra-ui/react'
 import { type AssetId, type ChainId, fromAssetId } from '@shapeshiftoss/caip'
 import { KnownChainIds } from '@shapeshiftoss/types'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
 import { ChainDropdown } from 'components/ChainDropdown/ChainDropdown'
 import { Main } from 'components/Layout/Main'
 import { SEO } from 'components/Layout/Seo'
-import { marketApi } from 'state/slices/marketDataSlice/marketDataSlice'
 import { selectAssetIds } from 'state/slices/selectors'
-import { useAppDispatch, useAppSelector } from 'state/store'
+import { useAppSelector } from 'state/store'
 
 import { AssetCard } from './components/AssetCard'
 import { CardWithSparkline } from './components/CardWithSparkline'
@@ -40,7 +39,6 @@ const AssetsGrid: React.FC<{
   selectedChainId?: ChainId
   isLoading: boolean
 }> = ({ assetIds, selectedChainId, isLoading }) => {
-  const dispatch = useAppDispatch()
   const history = useHistory()
   const filteredAssetIds = useMemo(
     () =>
@@ -53,12 +51,6 @@ const AssetsGrid: React.FC<{
     [assetIds, selectedChainId],
   )
 
-  useEffect(() => {
-    filteredAssetIds.forEach(assetId =>
-      dispatch(marketApi.endpoints.findByAssetId.initiate(assetId)),
-    )
-  }, [assetIds, dispatch, filteredAssetIds])
-
   const handleCardClick = useCallback(
     (assetId: AssetId) => {
       return history.push(`/assets/${assetId}`)
@@ -98,7 +90,6 @@ const LpGrid: React.FC<{ assetIds: AssetId[]; selectedChainId?: ChainId; isLoadi
   selectedChainId,
   isLoading,
 }) => {
-  const dispatch = useAppDispatch()
   const history = useHistory()
   const handleCardClick = useCallback(
     (assetId: AssetId) => {
@@ -119,10 +110,6 @@ const LpGrid: React.FC<{ assetIds: AssetId[]; selectedChainId?: ChainId; isLoadi
     [assetIds, selectedChainId],
   )
 
-  useEffect(() => {
-    filteredAssetIds.map(assetId => dispatch(marketApi.endpoints.findByAssetId.initiate(assetId)))
-  }, [assetIds, dispatch, filteredAssetIds])
-
   return (
     <Grid templateRows={gridTemplateRowsSx} gridTemplateColumns={gridTemplateColumnSx} gap={4}>
       {filteredAssetIds.map((assetId, index) => {

src/pages/Markets/hooks/usePortalsAssetsQuery.ts

@@ -5,6 +5,7 @@ import { PORTALS_NETWORK_TO_CHAIN_ID } from 'lib/portals/constants'
 import type { TokenInfo } from 'lib/portals/types'
 import { fetchPortalsPlatforms, fetchPortalsTokens, portalTokenToAsset } from 'lib/portals/utils'
 import { assets as assetsSlice } from 'state/slices/assetsSlice/assetsSlice'
+import { marketApi } from 'state/slices/marketDataSlice/marketDataSlice'
 import { selectAssets, selectFeeAssetById } from 'state/slices/selectors'
 import { store, useAppDispatch, useAppSelector } from 'state/store'
 
@@ -66,6 +67,9 @@ export const usePortalsAssetsQuery = () => {
                 byId: { [assetId]: asset },
               }),
             )
+
+            // and its market-data since it may or may not be missing
+            dispatch(marketApi.endpoints.findByAssetId.initiate(assetId))
           }
 
           acc.byId[assetId] = token