diff --git a/app.config.js b/app.config.js index 9eabd2c4d..20e25263f 100644 --- a/app.config.js +++ b/app.config.js @@ -8,7 +8,7 @@ module.exports = { metadataCacheUri: process.env.NEXT_PUBLIC_METADATACACHE_URI || 'https://v4.aquarius.oceanprotocol.com', - calicaUri: 'https://calica.xyz/ocean/contracts', + calicaBaseUri: 'https://calica.xyz', // List of chainIds which metadata cache queries will return by default. // This preselects the Chains user preferences. chainIds: [1, 137, 56, 246, 1285], diff --git a/src/@context/Asset.tsx b/src/@context/Asset.tsx index ce473e339..2bbfaa78b 100644 --- a/src/@context/Asset.tsx +++ b/src/@context/Asset.tsx @@ -7,7 +7,12 @@ import React, { useCallback, ReactNode } from 'react' -import { Config, LoggerInstance, Purgatory } from '@oceanprotocol/lib' +import { + Config, + Datatoken, + LoggerInstance, + Purgatory +} from '@oceanprotocol/lib' import { CancelToken } from 'axios' import { getAsset } from '@utils/aquarius' import { useWeb3 } from './Web3' @@ -42,7 +47,7 @@ function AssetProvider({ }): ReactElement { const { appConfig } = useMarketMetadata() - const { chainId, accountId } = useWeb3() + const { chainId, accountId, web3 } = useWeb3() const [isInPurgatory, setIsInPurgatory] = useState(false) const [purgatoryData, setPurgatoryData] = useState() const [asset, setAsset] = useState() @@ -115,6 +120,27 @@ function AssetProvider({ }, [did] ) + // ----------------------------------- + // Helper: Get and set asset payment collector + // ----------------------------------- + useEffect(() => { + async function getInitialPaymentCollector() { + if (!asset?.datatokens || !asset.datatokens[0]?.address) return + try { + const datatoken = new Datatoken(web3) + const paymentCollector = await datatoken.getPaymentCollector( + asset.datatokens[0].address + ) + setAsset((prevState) => ({ + ...prevState, + paymentCollector + })) + } catch (error) { + LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error) + } + } + getInitialPaymentCollector() + }, [asset?.datatokens, web3]) // ----------------------------------- // Helper: Get and set asset access details diff --git a/src/@types/AssetExtended.d.ts b/src/@types/AssetExtended.d.ts index d6ee6ade1..67beafebe 100644 --- a/src/@types/AssetExtended.d.ts +++ b/src/@types/AssetExtended.d.ts @@ -6,5 +6,6 @@ declare global { interface AssetExtended extends Asset { accessDetails?: AccessDetails views?: number + paymentCollector?: string } } diff --git a/src/components/Asset/AssetContent/MetaFull.tsx b/src/components/Asset/AssetContent/MetaFull.tsx index f01d71915..f742f6f6a 100644 --- a/src/components/Asset/AssetContent/MetaFull.tsx +++ b/src/components/Asset/AssetContent/MetaFull.tsx @@ -1,29 +1,15 @@ -import React, { ReactElement, useState, useEffect } from 'react' +import React, { ReactElement, useState } from 'react' import MetaItem from './MetaItem' import styles from './MetaFull.module.css' import Publisher from '@shared/Publisher' import { useAsset } from '@context/Asset' -import { useWeb3 } from '@context/Web3' -import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib' -export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement { - const [paymentCollector, setPaymentCollector] = useState() +export default function MetaFull({ + ddo +}: { + ddo: AssetExtended +}): ReactElement { const { isInPurgatory } = useAsset() - const { web3 } = useWeb3() - - useEffect(() => { - async function getInitialPaymentCollector() { - try { - const datatoken = new Datatoken(web3) - setPaymentCollector( - await datatoken.getPaymentCollector(ddo.datatokens[0].address) - ) - } catch (error) { - LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error) - } - } - getInitialPaymentCollector() - }, [ddo, web3]) function DockerImage() { const containerInfo = ddo?.metadata?.algorithm?.container @@ -40,10 +26,10 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement { title="Owner" content={} /> - {paymentCollector && paymentCollector !== ddo?.nft?.owner && ( + {ddo?.paymentCollector && ddo?.paymentCollector !== ddo?.nft?.owner && ( } + content={} /> )} diff --git a/src/components/Asset/OwnerActions/calicaUtils.tsx b/src/components/Asset/OwnerActions/calicaUtils.tsx new file mode 100644 index 000000000..20a48581f --- /dev/null +++ b/src/components/Asset/OwnerActions/calicaUtils.tsx @@ -0,0 +1,30 @@ +import axios, { AxiosResponse, CancelToken } from 'axios' +import { calicaBaseUri } from '../../../../app.config' +function getCalicaChainName(chainId: number): string { + switch (chainId) { + case 5: + return 'goerli' + case 80001: + return 'maticmum' + case 137: + return 'matic' + + default: + return '' + } +} + +export async function checkCalicaContractAddress( + address: string, + chainId: number, + cancelToken?: CancelToken +): Promise { + const chainName = getCalicaChainName(chainId) + const serviceUrl = `${calicaBaseUri}/api/contract?address=${address}&chain=${chainName}` + + const response: AxiosResponse = await axios.get(serviceUrl, { + cancelToken + }) + console.log('calica response ', response, response.status) + return true +} diff --git a/src/components/Asset/OwnerActions/index.tsx b/src/components/Asset/OwnerActions/index.tsx index a9b21d45c..fb0021690 100644 --- a/src/components/Asset/OwnerActions/index.tsx +++ b/src/components/Asset/OwnerActions/index.tsx @@ -1,30 +1,51 @@ import { useAsset } from '@context/Asset' -import React from 'react' +import React, { useEffect, useState } from 'react' import { useWeb3 } from '@context/Web3' -import { calicaUri } from '../../../../app.config' +import { calicaBaseUri } from '../../../../app.config' import Button from '@components/@shared/atoms/Button' import styles from './index.module.css' +import { checkCalicaContractAddress } from './calicaUtils' +import { useCancelToken } from '@hooks/useCancelToken' export default function OwnerActions() { const { asset, isOwner } = useAsset() const { accountId } = useWeb3() - + const [calicaUri, setCalicaUri] = useState() + const newCancelToken = useCancelToken() + useEffect(() => { + checkCalicaContractAddress( + asset.paymentCollector, + asset.chainId, + newCancelToken() + ) + console.log( + 'calicaBaseUri', + calicaBaseUri, + calicaUri, + asset?.paymentCollector + ) + }, [asset?.paymentCollector, calicaUri]) + // {ddo?.paymentCollector && ddo?.paymentCollector !== ddo?.nft?.owner && ( return isOwner ? (
{' '} - |{' '} - + {calicaUri && ( + <> + |{' '} + + + )}
) : null }