Avoiding getInitialPaymentCollector failure (#1816)

* early return is no web3 or ddo

* Creating test for MetaFull

* adding test: src/components/Asset/AssetContent/MetaSecondary.test.tsx

* Adding test for bookmarks

* Adding test for displaying payment collector

* Removing comments

* Renaming assetAquarius

* Renaming assetWithAccessDetails

* Ensuring that the payment collector is shown even without a wallet connected

* Removing broken test

* Using getDummyWeb3 for fetching the payment collector address

.jest/__fixtures__/algorithmAquarius.ts

@@ -0,0 +1,91 @@
+import { Asset } from '@oceanprotocol/lib'
+
+export const algorithmAquarius: Asset = {
+  '@context': ['https://w3id.org/did/v1'],
+  id: 'did:op:6654b0793765b269696cec8d2f0d077d9bbcdd3c4f033d941ab9684e8ad06630',
+  nftAddress: '0xbA5BA7B09e2FA1eb0258f647503F81D2Af5cb07d',
+  version: '4.1.0',
+  chainId: 1,
+  metadata: {
+    created: '2022-09-29T11:30:26Z',
+    updated: '2022-09-29T11:30:26Z',
+    type: 'algorithm',
+    name: 'algorithmTestitest',
+    description: 'This is an algorithm test.',
+    links: ['https://www.oceanprotocol.com/sample'],
+    tags: [
+      'trading',
+      'defi',
+      'algorithm',
+      'algorithmic-crypto-trading',
+      'algo-trading',
+      'trading-strategy',
+      'cryptocurrency',
+      'crypto'
+    ],
+    author: 'Test User',
+    license: 'https://market.oceanprotocol.com/terms',
+    additionalInformation: {
+      termsAndConditions: true
+    },
+    algorithm: {
+      language: 'json',
+      version: '0.1',
+      container: {
+        entrypoint: 'python $algo',
+        tag: 'latest',
+        image: 'https://docker.com/test.img',
+        checksum: ''
+      }
+    }
+  },
+  services: [
+    {
+      id: 'dbc42f4c62d2452f8731fd023eacfae74e9c7a42fbd12ce84310f13342e4aab1',
+      type: 'access',
+      files:
+        '0x04022ef1afafe340f41b261ef721b8dd55dee094975cc70330803d760beef38871948ce572ff1c533d56cda2665749ed2eb8283e243ec5ee19011f510b6b263b2da0af537e3f1fdff7ddd90fa26c7a4761a6d26928bc1348a302634012aac7998e92c84456ab73e9a847120c44ebda15781787e8c382391b2eaefc8b8d36998f3998d1c4647f4f7bb28f4278093c1d231f66e78f81452049443b9e540aeb42ebbdc1b748c024eb10218532814736e241efa1c2a687685b4e2ea7a877685aa0ea325d1a8cf765d1b423b32d81ec3c3e22fc9c15c6b9b71f2862edaec4e4cf7c3a638ffc0ecb88ede3cabb511d4780543a53c001a95f42de1877796e13c997b57bc671507e92198934b4ea7c2e6554993388421253e8c2f10458dec872a7ebfa71b6e77ed359222c93261ba252028c5da06ccf8defcd529885b2125816325a47e23728b513',
+      datatokenAddress: '0x067e1E6ec580F3F0f6781679A4A5AB07A6464b08',
+      serviceEndpoint: 'https://v4.provider.goerli.oceanprotocol.com',
+      timeout: 604800
+    }
+  ],
+  event: {
+    tx: '0x3e07a75c1cc5d4146222a93ab4319144e60ecca3ebfb8b15f1ff339d6f479dc9',
+    block: 7680195,
+    from: '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7',
+    contract: '0xbA5BA7B09e2FA1eb0258f647503F81D2Af5cb07d',
+    datetime: '2022-09-29T11:31:12'
+  },
+  nft: {
+    address: '0xbA5BA7B09e2FA1eb0258f647503F81D2Af5cb07d',
+    name: 'Ocean Data NFT',
+    symbol: 'OCEAN-NFT',
+    state: 0,
+    tokenURI:
+      'data:application/json;base64,eyJuYW1lIjoiT2NlYW4gRGF0YSBORlQiLCJzeW1ib2wiOiJPQ0VBTi1ORlQiLCJkZXNjcmlwdGlvbiI6IlRoaXMgTkZUIHJlcHJlc2VudHMgYW4gYXNzZXQgaW4gdGhlIE9jZWFuIFByb3RvY29sIHY0IGVjb3N5c3RlbS5cblxuVmlldyBvbiBPY2VhbiBNYXJrZXQ6IGh0dHBzOi8vbWFya2V0Lm9jZWFucHJvdG9jb2wuY29tL2Fzc2V0L2RpZDpvcDo2NjU0YjA3OTM3NjViMjY5Njk2Y2VjOGQyZjBkMDc3ZDliYmNkZDNjNGYwMzNkOTQxYWI5Njg0ZThhZDA2NjMwIiwiZXh0ZXJuYWxfdXJsIjoiaHR0cHM6Ly9tYXJrZXQub2NlYW5wcm90b2NvbC5jb20vYXNzZXQvZGlkOm9wOjY2NTRiMDc5Mzc2NWIyNjk2OTZjZWM4ZDJmMGQwNzdkOWJiY2RkM2M0ZjAzM2Q5NDFhYjk2ODRlOGFkMDY2MzAiLCJiYWNrZ3JvdW5kX2NvbG9yIjoiMTQxNDE0IiwiaW1hZ2VfZGF0YSI6ImRhdGE6aW1hZ2Uvc3ZnK3htbCwlM0Nzdmcgdmlld0JveD0nMCAwIDk5IDk5JyBmaWxsPSd1bmRlZmluZWQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyclM0UlM0NwYXRoIGZpbGw9JyUyM2ZmNDA5Mjc3JyBkPSdNMCw5OUwwLDI5QzksMjUgMTksMjIgMjksMjFDMzgsMTkgNDksMTkgNjEsMjFDNzIsMjIgODUsMjUgOTksMjlMOTksOTlaJy8lM0UlM0NwYXRoIGZpbGw9JyUyM2ZmNDA5MmJiJyBkPSdNMCw5OUwwLDU1QzgsNDkgMTcsNDQgMjgsNDNDMzgsNDEgNTAsNDIgNjMsNDNDNzUsNDMgODcsNDIgOTksNDJMOTksOTlaJyUzRSUzQy9wYXRoJTNFJTNDcGF0aCBmaWxsPSclMjNmZjQwOTJmZicgZD0nTTAsOTlMMCw2OEMxMSw2NiAyMiw2NSAzMiw2N0M0MSw2OCA1MCw3MyA2MSw3NkM3MSw3OCA4NSw3OCA5OSw3OUw5OSw5OVonJTNFJTNDL3BhdGglM0UlM0Mvc3ZnJTNFIn0=',
+    owner: '0x99840Df5Cb42faBE0Feb8811Aaa4BC99cA6C84e0',
+    created: '2022-09-29T11:31:12'
+  },
+  datatokens: [
+    {
+      address: '0x067e1E6ec580F3F0f6781679A4A5AB07A6464b08',
+      name: 'Stupendous Orca Token',
+      symbol: 'STUORC-59',
+      serviceId:
+        'dbc42f4c62d2452f8731fd023eacfae74e9c7a42fbd12ce84310f13342e4aab1'
+    }
+  ],
+  stats: {
+    orders: 22,
+    price: {
+      value: 3231343254,
+      tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
+      tokenSymbol: 'OCEAN'
+    }
+  },
+  purgatory: {
+    state: false,
+    reason: ''
+  }
+}

.jest/__fixtures__/datasetAquarius.ts

@@ -1,6 +1,6 @@
 import { Asset } from '@oceanprotocol/lib'
 
-export const assetAquarius: Asset = {
+export const datasetAquarius: Asset = {
   '@context': ['https://w3id.org/did/v1'],
   id: 'did:op:6654b0793765b269696cec8d2f0d077d9bbcdd3c4f033d941ab9684e8ad06630',
   nftAddress: '0xbA5BA7B09e2FA1eb0258f647503F81D2Af5cb07d',
@@ -12,7 +12,16 @@ export const assetAquarius: Asset = {
     type: 'dataset',
     name: 'Testitest',
     description: 'This is a test.',
-    tags: [],
+    tags: [
+      'trading',
+      'defi',
+      'algorithm',
+      'algorithmic-crypto-trading',
+      'algo-trading',
+      'trading-strategy',
+      'cryptocurrency',
+      'crypto'
+    ],
     author: 'Test User',
     license: 'https://market.oceanprotocol.com/terms',
     additionalInformation: {

.jest/__fixtures__/datasetWithAccessDetails.ts

@@ -1,7 +1,7 @@
-import { assetAquarius } from './assetAquarius'
+import { datasetAquarius } from './datasetAquarius'
 
 export const asset: AssetExtended = {
-  ...assetAquarius,
+  ...datasetAquarius,
   accessDetails: {
     templateId: 1,
     publisherMarketOrderFee: '0',

.jest/__mocks__/@utils/accessDetailsAndPricing.ts

@@ -1,3 +1,3 @@
-import { assets } from '../../__fixtures__/assetsWithAccessDetails'
+import { assets } from '../../__fixtures__/datasetsWithAccessDetails'
 
 export const getAccessDetailsForAssets = jest.fn().mockResolvedValue(assets)

.jest/__mocks__/hooksMocks.ts

@@ -1,7 +1,7 @@
 import marketMetadata from '../__fixtures__/marketMetadata'
 import userPreferences from '../__fixtures__/userPreferences'
 import web3 from '../__fixtures__/web3'
-import { asset } from '../__fixtures__/assetWithAccessDetails'
+import { asset } from '../__fixtures__/datasetWithAccessDetails'
 
 jest.mock('../../src/@context/MarketMetadata', () => ({
   useMarketMetadata: () => marketMetadata

src/components/@shared/AssetList/index.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import MarketMetadataProvider from '@context/MarketMetadata'
 import { UserPreferencesProvider } from '@context/UserPreferences'
 import AssetList, { AssetListProps } from '.'
-import { assets } from '../../../../.jest/__fixtures__/assetsWithAccessDetails'
+import { assets } from '../../../../.jest/__fixtures__/datasetsWithAccessDetails'
 
 export default {
   title: 'Component/@shared/AssetList',

src/components/@shared/AssetList/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react'
 import React from 'react'
 import AssetList from './index'
-import { assetAquarius } from '../../../../.jest/__fixtures__/assetAquarius'
+import { datasetAquarius } from '../../../../.jest/__fixtures__/datasetAquarius'
 
 describe('@shared/AssetList', () => {
   it('renders without crashing', async () => {
@@ -9,7 +9,7 @@ describe('@shared/AssetList', () => {
 
     render(
       <AssetList
-        assets={[assetAquarius]}
+        assets={[datasetAquarius]}
         showPagination
         page={1}
         totalPages={10}

src/components/@shared/AssetTeaser/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import testRender from '../../../../.jest/testRender'
 import AssetTeaser from './index'
-import { asset } from '../../../../.jest/__fixtures__/assetWithAccessDetails'
+import { asset } from '../../../../.jest/__fixtures__/datasetWithAccessDetails'
 
 describe('@shared/AssetTeaser', () => {
   testRender(<AssetTeaser asset={asset} />)

src/components/@shared/Price/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 import Price from './index'
-import { asset } from '../../../../.jest/__fixtures__/assetWithAccessDetails'
+import { asset } from '../../../../.jest/__fixtures__/datasetWithAccessDetails'
 import prices from '../../../../.jest/__fixtures__/prices'
 
 jest.mock('../../../@context/Prices', () => ({

src/components/Asset/AssetContent/Bookmark.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import Bookmark from './Bookmark'
+import { datasetAquarius } from '../../../../.jest/__fixtures__/datasetAquarius'
+
+describe('src/components/Asset/AssetContent/Bookmark.tsx', () => {
+  it('renders Add Bookmark button', () => {
+    render(<Bookmark did={datasetAquarius.id} />)
+    expect(screen.getByTitle('Add Bookmark')).toBeInTheDocument()
+  })
+})

src/components/Asset/AssetContent/MetaFull.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import MetaFull from './MetaFull'
+import { datasetAquarius } from '../../../../.jest/__fixtures__/datasetAquarius'
+import { algorithmAquarius } from '../../../../.jest/__fixtures__/algorithmAquarius'
+
+describe('src/components/Asset/AssetContent/MetaFull.tsx', () => {
+  it('renders metadata', () => {
+    render(<MetaFull ddo={datasetAquarius} />)
+    expect(screen.getByText('Owner')).toBeInTheDocument()
+  })
+
+  it('renders metadata for an algorithm', () => {
+    render(<MetaFull ddo={algorithmAquarius} />)
+    expect(screen.getByText('Docker Image')).toBeInTheDocument()
+  })
+})

src/components/Asset/AssetContent/MetaFull.tsx

@@ -3,17 +3,20 @@ 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 { useWeb3 } from '@context/Web3'
+import { getDummyWeb3 } from '@utils/web3'
 import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
   const [paymentCollector, setPaymentCollector] = useState<string>()
   const { isInPurgatory } = useAsset()
-  const { web3 } = useWeb3()
+  // const { web3 } = useWeb3()
 
   useEffect(() => {
     async function getInitialPaymentCollector() {
       try {
+        if (!ddo) return
+        const web3 = await getDummyWeb3(ddo.chainId)
         const datatoken = new Datatoken(web3)
         setPaymentCollector(
           await datatoken.getPaymentCollector(ddo.datatokens[0].address)
@@ -23,7 +26,7 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
       }
     }
     getInitialPaymentCollector()
-  }, [ddo, web3])
+  }, [ddo])
 
   function DockerImage() {
     const containerInfo = ddo?.metadata?.algorithm?.container

src/components/Asset/AssetContent/MetaSecondary.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import MetaSecondary from './MetaSecondary'
+import { datasetAquarius } from '../../../../.jest/__fixtures__/datasetAquarius'
+import { algorithmAquarius } from '../../../../.jest/__fixtures__/algorithmAquarius'
+
+describe('src/components/Asset/AssetContent/MetaSecondary.tsx', () => {
+  it('renders tags', () => {
+    render(<MetaSecondary ddo={datasetAquarius} />)
+    expect(
+      screen.getByText(datasetAquarius.metadata.tags[0])
+    ).toBeInTheDocument()
+  })
+  it('renders download sample button', () => {
+    render(<MetaSecondary ddo={algorithmAquarius} />)
+    expect(screen.getByText('Sample Data')).toBeInTheDocument()
+  })
+})

src/components/Asset/RelatedAssets/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 import RelatedAssets from '.'
-import { assets } from '../../../../.jest/__fixtures__/assetsWithAccessDetails'
+import { assets } from '../../../../.jest/__fixtures__/datasetsWithAccessDetails'
 import { queryMetadata } from '../../../@utils/aquarius'
 // import * as userPreferencesMock from '../../../@context/UserPreferences'
 

src/components/Home/MostViews/index.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import MostViews from '.'
 import axios from 'axios'
 import { queryMetadata } from '@utils/aquarius'
-import { assetAquarius } from '../../../../.jest/__fixtures__/assetAquarius'
+import { datasetAquarius } from '../../../../.jest/__fixtures__/datasetAquarius'
 
 jest.mock('axios')
 jest.mock('@utils/aquarius')
@@ -12,7 +12,7 @@ const axiosMock = axios as jest.Mocked<typeof axios>
 const queryMetadataMock = queryMetadata as jest.Mock
 
 const queryMetadataBaseReturn: PagedAssets = {
-  results: [assetAquarius],
+  results: [datasetAquarius],
   page: 1,
   totalPages: 1,
   totalResults: 1,
@@ -27,7 +27,7 @@ describe('components/Home/MostViews', () => {
   it('renders without crashing', async () => {
     axiosMock.get.mockImplementation(() =>
       Promise.resolve({
-        data: [{ count: 666, did: assetAquarius.id }]
+        data: [{ count: 666, did: datasetAquarius.id }]
       })
     )
     queryMetadataMock.mockResolvedValue(queryMetadataBaseReturn)