feat: grouped asset by primary asset

package.json

@@ -182,7 +182,6 @@
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.5.0",
-    "react-infinite-scroll-component": "^6.1.0",
     "react-intersection-observer": "^9.13.1",
     "react-multi-ref": "^1.0.1",
     "react-number-format": "^4.9.3",

packages/types/src/base.ts

@@ -85,6 +85,8 @@ export type Asset = {
   explorerTxLink: string
   explorerAddressLink: string
   relatedAssetKey: AssetId | null | undefined
+  isPrimary?: boolean
+  isChainSpecific?: boolean
   isPool?: boolean
 }
 

packages/utils/src/assetData/decodeAssetData.ts

@@ -85,6 +85,8 @@ export const decodeAssetData = (
             asset.name = `${asset.name} on ${baseAsset.networkName}`
           }
           asset.relatedAssetKey = relatedAssetId
+          asset.isPrimary = relatedAssetId === null || relatedAssetId === asset.assetId
+          asset.isChainSpecific = relatedAssetId === null
           break
         }
         case 'name':

packages/utils/src/makeAsset/makeAsset.ts

@@ -49,5 +49,7 @@ export const makeAsset = (
     color,
     icon,
     relatedAssetKey: null,
+    isPrimary: true,
+    isChainSpecific: true,
   })
 }

src/components/AssetSearch/AssetSearch.tsx

@@ -26,12 +26,14 @@ export type AssetSearchProps = {
   onAssetClick?: (asset: Asset) => void
   formProps?: BoxProps
   allowWalletUnsupportedAssets?: boolean
+  showRelatedAssets?: boolean
 }
 export const AssetSearch: FC<AssetSearchProps> = ({
   assets,
   onAssetClick,
   formProps,
   allowWalletUnsupportedAssets,
+  showRelatedAssets,
 }) => {
   const translate = useTranslate()
   const navigate = useNavigate()
@@ -134,6 +136,7 @@ export const AssetSearch: FC<AssetSearchProps> = ({
           assets={listAssets}
           handleClick={handleClick}
           disableUnsupported={!allowWalletUnsupportedAssets}
+          showRelatedAssets={showRelatedAssets}
         />
       </Box>
     </>

src/components/AssetSearch/components/AssetList.tsx

@@ -1,12 +1,13 @@
 import type { ListProps } from '@chakra-ui/react'
-import { Center, Flex, Icon, Skeleton } from '@chakra-ui/react'
+import { Box, Center, Flex, Icon, Skeleton } from '@chakra-ui/react'
 import type { Asset } from '@shapeshiftoss/types'
 import { range } from 'lodash'
 import type { CSSProperties, FC } from 'react'
 import { useCallback, useMemo } from 'react'
 import { FaRegCompass } from 'react-icons/fa6'
 import { Virtuoso } from 'react-virtuoso'
 
+import type { AssetRowData } from './AssetRow'
 import { AssetRow } from './AssetRow'
 
 import { Text } from '@/components/Text'
@@ -18,10 +19,12 @@ export type AssetData = {
   handleLongPress?: (asset: Asset) => void
   disableUnsupported?: boolean
   hideZeroBalanceAmounts?: boolean
-  rowComponent?: FC<{ asset: Asset; index: number; data: AssetData }>
+  rowComponent?: FC<AssetRowData>
   isLoading?: boolean
   portalsAssets?: PortalsAssets
-  height?: string
+  showPrice?: boolean
+  onImportClick?: (asset: Asset) => void
+  showRelatedAssets?: boolean
 }
 
 type AssetListProps = AssetData & ListProps
@@ -31,7 +34,7 @@ const scrollbarStyle: CSSProperties = {
   msOverflowStyle: 'none',
 }
 
-const INCREASE_VIEWPORT_BY = { top: 100, bottom: 100 } as const
+export const INCREASE_VIEWPORT_BY = { top: 300, bottom: 100 } as const
 
 export const AssetList: FC<AssetListProps> = ({
   assets,
@@ -42,11 +45,14 @@ export const AssetList: FC<AssetListProps> = ({
   rowComponent = AssetRow,
   isLoading = false,
   portalsAssets,
+  showPrice = false,
   height = '50vh',
+  onImportClick,
+  showRelatedAssets = false,
 }) => {
   const virtuosoStyle = useMemo(
     () => ({
-      height,
+      height: typeof height === 'string' ? height : `${height}px`,
       ...scrollbarStyle,
     }),
     [height],
@@ -60,6 +66,8 @@ export const AssetList: FC<AssetListProps> = ({
       disableUnsupported,
       hideZeroBalanceAmounts,
       portalsAssets,
+      onImportClick,
+      showRelatedAssets,
     }),
     [
       assets,
@@ -68,21 +76,33 @@ export const AssetList: FC<AssetListProps> = ({
       handleLongPress,
       hideZeroBalanceAmounts,
       portalsAssets,
+      onImportClick,
+      showRelatedAssets,
     ],
   )
 
   const renderRow = useCallback(
     (index: number) => {
       const asset = assets[index]
       const RowComponent = rowComponent
-      return <RowComponent asset={asset} index={index} data={itemData} />
+
+      return (
+        <RowComponent
+          asset={asset}
+          index={index}
+          data={itemData}
+          showPrice={showPrice}
+          onImportClick={onImportClick}
+          showRelatedAssets={showRelatedAssets}
+        />
+      )
     },
-    [assets, itemData, rowComponent],
+    [assets, itemData, rowComponent, showPrice, onImportClick, showRelatedAssets],
   )
 
   if (isLoading) {
     return (
-      <Flex flexDir='column' width='100%' overflowY='auto' flex='1' minHeight={0} mt={4}>
+      <Flex flexDir='column' width='100%' overflowY='auto' flex='1' minHeight={0} mt={4} px={2}>
         {range(3).map(index => (
           <Flex key={index} align='center' width='100%' justifyContent='space-between' mb={4}>
             <Flex align='center'>
@@ -111,12 +131,22 @@ export const AssetList: FC<AssetListProps> = ({
     )
   }
 
+  if (assets.length <= 10) {
+    return (
+      <Box maxHeight={height} overflow='auto' height='auto'>
+        {assets.map((asset, index) => (
+          <Box key={asset.assetId}>{renderRow(index)}</Box>
+        ))}
+      </Box>
+    )
+  }
+
   return (
     <Virtuoso
       data={assets}
       itemContent={renderRow}
       style={virtuosoStyle}
-      overscan={200}
+      overscan={1000}
       increaseViewportBy={INCREASE_VIEWPORT_BY}
     />
   )