From 65194696d35baccd23292faa5f0a9a7ba2ce1252 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Mon, 17 May 2021 17:08:15 +0300 Subject: [PATCH] Handle asset price in teaser (#596) * used price from subgraph for asset teasers * moved loading component inside AssetList * replaced any with proper types inside subgraph utils * fixed loading component displayed when empty assets or prices list * show loading component when refetching data on sort and filter * get each asset price before displaying the component, loading changes * refactoring functions for getting asset prices Co-authored-by: Norbi --- .../molecules/AssetTeaser.stories.tsx | 3 +- src/components/molecules/AssetTeaser.tsx | 10 +- src/components/organisms/AssetList.module.css | 6 + src/components/organisms/AssetList.tsx | 42 +++- .../pages/History/PublishedList.tsx | 12 +- src/components/pages/Home.module.css | 6 - src/components/pages/Home.tsx | 17 +- src/components/templates/Search/index.tsx | 21 +- src/utils/aquarius.ts | 4 +- src/utils/subgraph.ts | 218 +++++++++++++----- 10 files changed, 227 insertions(+), 112 deletions(-) diff --git a/src/components/molecules/AssetTeaser.stories.tsx b/src/components/molecules/AssetTeaser.stories.tsx index 63a4c445f..9f76a5508 100644 --- a/src/components/molecules/AssetTeaser.stories.tsx +++ b/src/components/molecules/AssetTeaser.stories.tsx @@ -2,9 +2,10 @@ import AssetTeaser from '../molecules/AssetTeaser' import * as React from 'react' import { DDO } from '@oceanprotocol/lib' import ddo from '../../../tests/unit/__fixtures__/ddo' +import { AssetListPrices } from '../../utils/subgraph' export default { title: 'Molecules/Asset Teaser' } -export const Default = () => +export const Default = () => diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index a976ae120..f05bbec8e 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -3,7 +3,7 @@ import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' -import { DDO } from '@oceanprotocol/lib' +import { DDO, BestPrice } from '@oceanprotocol/lib' import removeMarkdown from 'remove-markdown' import Publisher from '../atoms/Publisher' import Time from '../atoms/Time' @@ -11,9 +11,13 @@ import AssetType from '../atoms/AssetType' declare type AssetTeaserProps = { ddo: DDO + price: BestPrice } -const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { +const AssetTeaser: React.FC = ({ + ddo, + price +}: AssetTeaserProps) => { const { attributes } = ddo.findServiceByType('metadata') const { name, type } = attributes.main const { dataTokenInfo } = ddo @@ -47,7 +51,7 @@ const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => {