mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-28 00:27:49 +02:00
* label renaming, add total user liquidity * new useProfile provider * centralize pool shares fetching * add some assets fetching to profile provider * move 3box profile fetching, check passed accountId * cancel token fixes * remove publisher on published assets list * more cancel token fixes * prevent asset name double fetching in pool shares * prevent asset name double fetching in downloads * prevent asset name double fetching in pool transactions * more cancel token fixes * refetch crash fix * another pool shares refetch fix * pool transactions data flow refactor * Add total downloads, speed up downloads fetching (#849) * add total downloads * replace multiple retrieveDDO with one single request * getAssetsFromDidList() helper * fix mixed up timestamps * data structure based on tokenOrders * add logging * add tooltip to downloads, small NumberUnit refactor * safeguard against passed empty didList * deal with plural/singular in labels
100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
import AssetTeaser from '../molecules/AssetTeaser'
|
|
import React, { useEffect, useState } from 'react'
|
|
import Pagination from '../molecules/Pagination'
|
|
import styles from './AssetList.module.css'
|
|
import { DDO } from '@oceanprotocol/lib'
|
|
import classNames from 'classnames/bind'
|
|
import { getAssetsBestPrices, AssetListPrices } from '../../utils/subgraph'
|
|
import Loader from '../atoms/Loader'
|
|
import { useUserPreferences } from '../../providers/UserPreferences'
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
function LoaderArea() {
|
|
return (
|
|
<div className={styles.loaderWrap}>
|
|
<Loader />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
declare type AssetListProps = {
|
|
assets: DDO[]
|
|
showPagination: boolean
|
|
page?: number
|
|
totalPages?: number
|
|
isLoading?: boolean
|
|
onPageChange?: React.Dispatch<React.SetStateAction<number>>
|
|
className?: string
|
|
noPublisher?: boolean
|
|
}
|
|
|
|
const AssetList: React.FC<AssetListProps> = ({
|
|
assets,
|
|
showPagination,
|
|
page,
|
|
totalPages,
|
|
isLoading,
|
|
onPageChange,
|
|
className,
|
|
noPublisher
|
|
}) => {
|
|
const { chainIds } = useUserPreferences()
|
|
const [assetsWithPrices, setAssetWithPrices] = useState<AssetListPrices[]>()
|
|
const [loading, setLoading] = useState<boolean>(true)
|
|
|
|
useEffect(() => {
|
|
if (!assets) return
|
|
isLoading && setLoading(true)
|
|
getAssetsBestPrices(assets).then((asset) => {
|
|
setAssetWithPrices(asset)
|
|
setLoading(false)
|
|
})
|
|
}, [assets])
|
|
|
|
// // This changes the page field inside the query
|
|
function handlePageChange(selected: number) {
|
|
onPageChange(selected + 1)
|
|
}
|
|
|
|
const styleClasses = cx({
|
|
assetList: true,
|
|
[className]: className
|
|
})
|
|
|
|
return assetsWithPrices &&
|
|
!loading &&
|
|
(isLoading === undefined || isLoading === false) ? (
|
|
<>
|
|
<div className={styleClasses}>
|
|
{assetsWithPrices.length > 0 ? (
|
|
assetsWithPrices.map((assetWithPrice) => (
|
|
<AssetTeaser
|
|
ddo={assetWithPrice.ddo}
|
|
price={assetWithPrice.price}
|
|
key={assetWithPrice.ddo.id}
|
|
noPublisher={noPublisher}
|
|
/>
|
|
))
|
|
) : chainIds.length === 0 ? (
|
|
<div className={styles.empty}>No network selected.</div>
|
|
) : (
|
|
<div className={styles.empty}>No results found.</div>
|
|
)}
|
|
</div>
|
|
|
|
{showPagination && (
|
|
<Pagination
|
|
totalPages={totalPages}
|
|
currentPage={page}
|
|
onChangePage={handlePageChange}
|
|
/>
|
|
)}
|
|
</>
|
|
) : (
|
|
<LoaderArea />
|
|
)
|
|
}
|
|
|
|
export default AssetList
|