From a1856d79a4e92d01218ad6a293577b8d4d300b01 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Fri, 10 Jun 2022 07:11:37 -0700 Subject: [PATCH 1/5] fix global stats (#1512) * fix global stats * switch graph schema to ropsten * minor fix --- package.json | 2 +- src/components/Footer/MarketStats/index.tsx | 35 +++++++++------------ 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index b64b82c96..1a9b95e7c 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "type-check": "tsc --noEmit", "deploy:s3": "bash scripts/deploy-s3.sh", "postinstall": "husky install", - "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/", + "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/", "storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet", "storybook:build": "cross-env NODE_ENV=test build-storybook" }, diff --git a/src/components/Footer/MarketStats/index.tsx b/src/components/Footer/MarketStats/index.tsx index 10c050883..d50d8ff2b 100644 --- a/src/components/Footer/MarketStats/index.tsx +++ b/src/components/Footer/MarketStats/index.tsx @@ -61,7 +61,9 @@ export default function MarketStats(): ReactElement { // const getMarketStats = useCallback(async () => { if (!mainChainIds?.length) return - + const newData: { + [chainId: number]: FooterStatsValuesGlobalStatistics + } = {} for (const chainId of mainChainIds) { const context: OperationContext = { url: `${getSubgraphUri( @@ -73,15 +75,12 @@ export default function MarketStats(): ReactElement { try { const response = await fetchData(queryGlobalStatistics, null, context) if (!response?.data?.globalStatistics) return - - setData((prevState) => ({ - ...prevState, - [chainId]: response.data.globalStatistics[0] - })) + newData[chainId] = response.data.globalStatistics[0] } catch (error) { LoggerInstance.error('Error fetching global stats: ', error.message) } } + setData(newData) }, [mainChainIds]) // @@ -96,10 +95,12 @@ export default function MarketStats(): ReactElement { // useEffect(() => { if (!data || !mainChainIds?.length) return - const newTotal: StatsTotal = { ...initialTotal // always start calculating beginning from initial 0 values } + const newTVLInOcean: StatsValue = {} + const newTotalLiquidity: StatsValue = {} + const newPoolCount: StatsValue = {} for (const chainId of mainChainIds) { const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value @@ -109,25 +110,15 @@ export default function MarketStats(): ReactElement { ? new Decimal(baseTokenValue).mul(2) : new Decimal(0) - setTotalValueLockedInOcean((prevState) => ({ - ...prevState, - [chainId]: `${totalValueLockedInOcean}` - })) + newTVLInOcean[chainId] = `${totalValueLockedInOcean}` const totalOceanLiquidity = Number(baseTokenValue) || 0 - setTotalOceanLiquidity((prevState) => ({ - ...prevState, - [chainId]: `${totalOceanLiquidity}` - })) + newTotalLiquidity[chainId] = `${totalOceanLiquidity}` const poolCount = data[chainId]?.poolCount || 0 - setPoolCount((prevState) => ({ - ...prevState, - [chainId]: `${poolCount}` - })) - + newPoolCount[chainId] = `${poolCount}` const nftCount = data[chainId]?.nftCount || 0 const datatokenCount = data[chainId]?.datatokenCount || 0 const orderCount = data[chainId]?.orderCount || 0 @@ -142,7 +133,9 @@ export default function MarketStats(): ReactElement { LoggerInstance.error('Error data manipulation: ', error.message) } } - + setTotalValueLockedInOcean(newTVLInOcean) + setTotalOceanLiquidity(newTotalLiquidity) + setPoolCount(newPoolCount) setTotal(newTotal) }, [data, mainChainIds, prices, currency]) From 89a63f7cb25a4b3831cca0b3e2d42257ac11115c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 13 Jun 2022 14:41:18 +0100 Subject: [PATCH 2/5] NFT display tweaks (#1507) * NFT display tweaks * capitalization consistency * refactor * fix asset preview --- src/@context/Asset.tsx | 2 +- .../Asset/AssetContent/MetaMain/MetaAsset.tsx | 3 +- .../Asset/AssetContent/MetaMain/MetaInfo.tsx | 5 +- .../AssetContent/MetaMain/index.module.css | 29 --------- .../Asset/AssetContent/MetaMain/index.tsx | 52 ++-------------- .../{MetaMain => Nft}/NftTooltip.module.css | 0 .../{MetaMain => Nft}/NftTooltip.tsx | 38 ++++++------ .../Asset/AssetContent/Nft/index.module.css | 28 +++++++++ .../Asset/AssetContent/Nft/index.tsx | 60 +++++++++++++++++++ 9 files changed, 118 insertions(+), 99 deletions(-) rename src/components/Asset/AssetContent/{MetaMain => Nft}/NftTooltip.module.css (100%) rename src/components/Asset/AssetContent/{MetaMain => Nft}/NftTooltip.tsx (64%) create mode 100644 src/components/Asset/AssetContent/Nft/index.module.css create mode 100644 src/components/Asset/AssetContent/Nft/index.tsx diff --git a/src/@context/Asset.tsx b/src/@context/Asset.tsx index 0eebb77e6..abaed455f 100644 --- a/src/@context/Asset.tsx +++ b/src/@context/Asset.tsx @@ -18,7 +18,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing' import { useIsMounted } from '@hooks/useIsMounted' import { useMarketMetadata } from './MarketMetadata' -interface AssetProviderValue { +export interface AssetProviderValue { isInPurgatory: boolean purgatoryData: Purgatory asset: AssetExtended diff --git a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx index 295c0cfea..22877d365 100644 --- a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx +++ b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx @@ -5,13 +5,14 @@ import AddToken from '@shared/AddToken' import ExplorerLink from '@shared/ExplorerLink' import Publisher from '@shared/Publisher' import React, { ReactElement } from 'react' +import { AssetExtended } from 'src/@types/AssetExtended' import styles from './MetaAsset.module.css' export default function MetaAsset({ asset, isBlockscoutExplorer }: { - asset: Asset + asset: AssetExtended isBlockscoutExplorer: boolean }): ReactElement { const { isAssetNetwork } = useAsset() diff --git a/src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx b/src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx index 08b62631a..3188aca70 100644 --- a/src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx +++ b/src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx @@ -1,16 +1,17 @@ -import { Asset } from '@oceanprotocol/lib' +import { useAsset } from '@context/Asset' import AssetType from '@shared/AssetType' import Time from '@shared/atoms/Time' import Publisher from '@shared/Publisher' import { getServiceByName } from '@utils/ddo' import React, { ReactElement } from 'react' +import { AssetExtended } from 'src/@types/AssetExtended' import styles from './MetaInfo.module.css' export default function MetaInfo({ asset, nftPublisher }: { - asset: Asset + asset: AssetExtended nftPublisher: string }): ReactElement { const isCompute = Boolean(getServiceByName(asset, 'compute')) diff --git a/src/components/Asset/AssetContent/MetaMain/index.module.css b/src/components/Asset/AssetContent/MetaMain/index.module.css index 389bf2038..f04afa777 100644 --- a/src/components/Asset/AssetContent/MetaMain/index.module.css +++ b/src/components/Asset/AssetContent/MetaMain/index.module.css @@ -13,32 +13,3 @@ height: calc(var(--spacer) * 2); border-bottom: 1px solid var(--border-color); } - -.nftImage { - position: relative; - margin: 0; - border-right: 1px solid var(--border-color); - width: calc(var(--spacer) * 2); - height: calc(var(--spacer) * 2); -} - -.nftImage img, -.nftImage > svg:first-of-type { - width: 100%; - height: 100%; -} - -.nftImage > svg:first-of-type { - transform: scale(0.7); -} - -.nftImage .tooltip { - position: absolute; - padding: 0; - left: 0; - bottom: 0; -} - -.nftImage .tooltip svg { - fill: var(--font-color-text); -} diff --git a/src/components/Asset/AssetContent/MetaMain/index.tsx b/src/components/Asset/AssetContent/MetaMain/index.tsx index b233704e8..463444a49 100644 --- a/src/components/Asset/AssetContent/MetaMain/index.tsx +++ b/src/components/Asset/AssetContent/MetaMain/index.tsx @@ -1,14 +1,11 @@ import React, { ReactElement } from 'react' import styles from './index.module.css' -import { AssetExtended } from 'src/@types/AssetExtended' -import { decodeTokenURI } from '@utils/nft' import MetaAsset from './MetaAsset' import MetaInfo from './MetaInfo' -import Tooltip from '@shared/atoms/Tooltip' -import NftTooltip from './NftTooltip' -import Logo from '@shared/atoms/Logo' -import { FormPublishData } from '../../../Publish/_types' -import { useFormikContext } from 'formik' +import Nft from '../Nft' +import { AssetExtended } from 'src/@types/AssetExtended' + +const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285] export default function MetaMain({ asset, @@ -17,51 +14,12 @@ export default function MetaMain({ asset: AssetExtended nftPublisher: string }): ReactElement { - const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI) - - const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285] const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId) - // TODO: using this for the publish preview works fine, but produces a console warning - // on asset details page as there is no formik context there: - // Warning: Formik context is undefined, please verify you are calling useFormikContext() - // as child of a component. - const formikState = useFormikContext() - - // checking if the NFT has an image associated (tokenURI) - // if tokenURI is undefined, then we are in Preview - // for Preview we need to show accessDetails.dataImage - // as this is where the NFT's SVG (during publish) is stored - const nftImage = nftMetadata?.image_data - ? nftMetadata.image_data - : formikState?.values?.metadata?.nft?.image_data - ? formikState.values.metadata.nft.image_data - : null - return (