diff --git a/package-lock.json b/package-lock.json index bd225ef5d..2e248cca2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@coingecko/cryptoformat": "^0.4.4", + "@coingecko/cryptoformat": "^0.5.4", "@loadable/component": "^5.15.2", "@oceanprotocol/art": "^3.2.0", "@oceanprotocol/lib": "^1.0.0", @@ -2136,9 +2136,9 @@ } }, "node_modules/@coingecko/cryptoformat": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz", - "integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w==", + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz", + "integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw==", "engines": { "node": ">=10" } @@ -43149,9 +43149,9 @@ } }, "@coingecko/cryptoformat": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz", - "integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w==" + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz", + "integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw==" }, "@colors/colors": { "version": "1.5.0", diff --git a/package.json b/package.json index 893d62fce..1a9b95e7c 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,12 @@ "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" }, "dependencies": { - "@coingecko/cryptoformat": "^0.4.4", + "@coingecko/cryptoformat": "^0.5.4", "@loadable/component": "^5.15.2", "@oceanprotocol/art": "^3.2.0", "@oceanprotocol/lib": "^1.0.0", 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/@context/MarketMetadata/_queries.ts b/src/@context/MarketMetadata/_queries.ts index 84586f82f..ba13dd606 100644 --- a/src/@context/MarketMetadata/_queries.ts +++ b/src/@context/MarketMetadata/_queries.ts @@ -5,7 +5,9 @@ export const opcQuery = gql` opc(id: 1) { swapOceanFee swapNonOceanFee - approvedTokens + approvedTokens { + id + } id } } diff --git a/src/@context/MarketMetadata/index.tsx b/src/@context/MarketMetadata/index.tsx index 209fac7c0..a9e2145b9 100644 --- a/src/@context/MarketMetadata/index.tsx +++ b/src/@context/MarketMetadata/index.tsx @@ -36,7 +36,7 @@ function MarketMetadataProvider({ opcData.push({ chainId: appConfig.chainIdsSupported[i], - approvedTokens: response.data?.opc.approvedTokens, + approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id), swapApprovedFee: response.data?.opc.swapOceanFee, swapNotApprovedFee: response.data?.opc.swapNonOceanFee } as OpcFee) 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 (