Merge branch 'main' into feature/issue-1657-shacl-schema

.jest/testRender.ts

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import { ReactElement } from 'react'
+
+const testRender = (component: ReactElement): void => {
+  it('renders without crashing', () => {
+    const { container } = render(component)
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+}
+
+export default testRender

.storybook/storyshots.test.tsx

@@ -1,14 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots'
-import { render, waitFor } from '@testing-library/react'
-
-// Stories are render-tested with @testing-library/react,
-// overwriting default snapshot testing behavior
-initStoryshots({
-  asyncJest: true,
-  test: async ({ story, done }) => {
-    const storyElement = story.render()
-    // render the story with @testing-library/react
-    render(storyElement)
-    await waitFor(() => done())
-  }
-})

app.config.js

@@ -66,7 +66,7 @@ module.exports = {
   // Refers to Coingecko API tokenIds.
   coingeckoTokenIds: ['ocean-protocol', 'h2o', 'ethereum', 'matic-network'],
 
-  // Config for https://github.com/donavon/use-dark-mode
+  // Config for https://github.com/oceanprotocol/use-dark-mode
   darkModeConfig: {
     classNameDark: 'dark',
     classNameLight: 'light',

package.json

@@ -17,7 +17,7 @@
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
-    "postinstall": "husky install",
+    "postinstall": "husky install && rm -r node_modules/apollo-language-server/node_modules/graphql",
     "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"
@@ -26,18 +26,19 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.1.6",
+    "@oceanprotocol/lib": "^2.0.2",
     "@oceanprotocol/typographies": "^0.1.0",
+    "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@tippyjs/react": "^4.2.6",
-    "@urql/exchange-refocus": "^0.2.5",
-    "@walletconnect/web3-provider": "^1.7.8",
+    "@urql/exchange-refocus": "^1.0.0",
+    "@walletconnect/web3-provider": "^1.8.0",
     "axios": "^0.27.2",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.29.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "decimal.js": "^10.3.1",
     "dom-confetti": "^0.2.2",
     "dotenv": "^16.0.1",
-    "filesize": "^9.0.1",
+    "filesize": "^9.0.11",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
     "is-url-superb": "^6.1.0",
@@ -46,7 +47,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
     "myetherwallet-blockies": "^0.1.1",
-    "next": "^12.1.6",
+    "next": "12.1.6",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
@@ -64,58 +65,52 @@
     "remove-markdown": "^0.5.0",
     "slugify": "^1.6.5",
     "swr": "^1.3.0",
-    "urql": "^2.2.1",
-    "use-dark-mode": "^2.3.1",
-    "web3": "^1.7.4",
-    "web3modal": "^1.9.8",
+    "urql": "^3.0.3",
+    "web3": "^1.8.0",
+    "web3modal": "^1.9.9",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-storyshots": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/testing-react": "^1.3.0",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@svgr/webpack": "^6.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/loadable__component": "^5.13.4",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.omit": "^4.5.7",
-    "@types/node": "^17.0.41",
+    "@types/node": "^18.7.18",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-modal": "^3.13.1",
     "@types/react-paginate": "^7.1.1",
     "@types/remove-markdown": "^0.3.1",
-    "@types/yup": "^0.29.14",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.27.1",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
     "apollo": "^2.34.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.21.0",
+    "eslint": "^8.23.1",
     "eslint-config-oceanprotocol": "^2.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest-dom": "^4.0.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-testing-library": "^5.5.1",
-    "file-loader": "^6.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.6.4",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "prettier": "^2.6.2",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
-    "serve": "^13.0.2",
+    "serve": "^14.0.1",
     "stream-http": "^3.2.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.3"
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.3"
   },
   "repository": {
     "type": "git",

src/@hooks/contracts/useNftFactory.ts

@@ -10,7 +10,7 @@ function useNftFactory(): NftFactory {
   useEffect(() => {
     if (!web3 || !chainId) return
     const config = getOceanConfig(chainId)
-    const factory = new NftFactory(config?.erc721FactoryAddress, web3)
+    const factory = new NftFactory(config?.nftFactoryAddress, web3)
     setNftFactory(factory)
   }, [web3, chainId])
 

src/@utils/accessDetailsAndPricing.ts

@@ -23,7 +23,7 @@ import {
 
 const tokensPriceQuery = gql`
   query TokensPriceQuery($datatokenIds: [ID!], $account: String) {
-    tokens(where: { id_in: $datatokenIds }) {
+    tokens(first: 1000, where: { id_in: $datatokenIds }) {
       id
       symbol
       name

src/@utils/dispenser.ts

@@ -9,7 +9,7 @@ export async function setMinterToPublisher(
   accountId: string,
   setError: (msg: string) => void
 ): Promise<TransactionReceipt> {
-  const dispenserInstance = new Dispenser(web3, dispenserAddress)
+  const dispenserInstance = new Dispenser(dispenserAddress, web3)
   const status = await dispenserInstance.status(datatokenAddress)
   if (!status?.active) return
 

src/@utils/fixedRateExchange.ts

@@ -25,8 +25,8 @@ export async function getFixedBuyPrice(
 
   const config = getOceanConfig(chainId)
 
-  const fixed = new FixedRateExchange(web3, config.fixedRateExchangeAddress)
-  const estimatedPrice = await fixed.calcBaseInGivenOutDT(
+  const fixed = new FixedRateExchange(config.fixedRateExchangeAddress, web3)
+  const estimatedPrice = await fixed.calcBaseInGivenDatatokensOut(
     accessDetails.addressOrId,
     '1',
     consumeMarketFixedSwapFee

src/@utils/nft.ts

@@ -171,15 +171,6 @@ export async function setNFTMetadataAndTokenURI(
     metadataProofs: []
   }
 
-  const estGasSetMetadataAndTokenURI = await nft.estGasSetMetadataAndTokenURI(
-    asset.nftAddress,
-    accountId,
-    metadataAndTokenURI
-  )
-  LoggerInstance.log(
-    '[setNFTMetadataAndTokenURI] est Gas set metadata and token uri --',
-    estGasSetMetadataAndTokenURI
-  )
   const setMetadataAndTokenURITx = await nft.setMetadataAndTokenURI(
     asset.nftAddress,
     accountId,

src/@utils/order.ts

@@ -68,6 +68,7 @@ export async function order(
       // this assumes all fees are in ocean
       const txApprove = await approve(
         web3,
+        config,
         accountId,
         asset.accessDetails.baseToken.address,
         asset.accessDetails.datatoken.address,
@@ -154,19 +155,21 @@ async function approveProviderFee(
   accountId: string,
   web3: Web3,
   providerFeeAmount: string
-): Promise<string> {
+): Promise<TransactionReceipt> {
+  const config = getOceanConfig(asset.chainId)
   const baseToken =
     asset?.accessDetails?.type === 'free'
       ? getOceanConfig(asset.chainId).oceanTokenAddress
       : asset?.accessDetails?.baseToken?.address
   const txApproveWei = await approveWei(
     web3,
+    config,
     accountId,
     baseToken,
     asset?.accessDetails?.datatoken?.address,
     providerFeeAmount
   )
-  return txApproveWei as string // thanks ocean.js
+  return txApproveWei
 }
 
 async function startOrder(

src/components/@shared/FormInput/index.tsx

@@ -71,7 +71,7 @@ function checkError(
   parsedFieldName: string[],
   field: FieldInputProps<any>
 ) {
-  if (form?.errors === {}) {
+  if (form?.errors && Object.entries(form?.errors).length === 0) {
     return false
   } else if (
     (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&

src/components/@shared/atoms/Alert/index.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Alert from '@shared/atoms/Alert'
+
+describe('Alert', () => {
+  testRender(<Alert text="Alert text" state="info" />)
+})

src/components/@shared/atoms/Badge/index.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Badge from '@shared/atoms/Badge'
+
+describe('Badge', () => {
+  testRender(<Badge label="Badge text" />)
+})

src/components/@shared/atoms/Blockies/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Blockies from '@shared/atoms/Blockies'
+import { Default } from './index.stories'
+
+describe('Blockies', () => {
+  testRender(<Blockies {...Default.args} />)
+})

src/components/@shared/atoms/Container/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Container from '@shared/atoms/Container'
+import { Default } from './index.stories'
+
+describe('Container', () => {
+  testRender(<Container {...Default.args} />)
+})

src/components/@shared/atoms/Copy/index.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { render, act, screen, fireEvent } from '@testing-library/react'
 import { Default } from './index.stories'
+import Copy from '.'
 
 jest.useFakeTimers()
 
 describe('Copy', () => {
   test('should change class on click', () => {
-    render(<Default {...Default.args} />)
+    render(<Copy {...Default.args} />)
 
     const element = screen.getByTitle('Copy to clipboard')
     fireEvent.click(element)
@@ -14,7 +15,7 @@ describe('Copy', () => {
   })
 
   test('should remove class after timer end', () => {
-    render(<Default {...Default.args} />)
+    render(<Copy {...Default.args} />)
 
     const element = screen.getByTitle('Copy to clipboard')
     fireEvent.click(element)

src/components/@shared/atoms/Loader/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Loader from '@shared/atoms/Loader'
+import { Default } from './index.stories'
+
+describe('Loader', () => {
+  testRender(<Loader {...Default.args} />)
+})

src/components/@shared/atoms/Logo/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Logo from '@shared/atoms/Logo'
+import { Default } from './index.stories'
+
+describe('Logo', () => {
+  testRender(<Logo {...Default.args} />)
+})

src/components/@shared/atoms/Status/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Status from '@shared/atoms/Status'
+import { Default } from './index.stories'
+
+describe('Status', () => {
+  testRender(<Status {...Default.args} />)
+})

src/components/@shared/atoms/Time/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Time from '@shared/atoms/Time'
+import { Default } from './index.stories'
+
+describe('Time', () => {
+  testRender(<Time {...Default.args} />)
+})

src/components/Asset/Edit/EditMetadata.tsx

@@ -43,8 +43,8 @@ export default function Edit({
     const config = getOceanConfig(asset.chainId)
 
     const fixedRateInstance = new FixedRateExchange(
-      web3,
-      config.fixedRateExchangeAddress
+      config.fixedRateExchangeAddress,
+      web3
     )
 
     const setPriceResp = await fixedRateInstance.setRate(

src/components/Header/UserPreferences/Appearance.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, ChangeEvent } from 'react'
-import { DarkMode } from 'use-dark-mode'
+import { DarkMode } from '@oceanprotocol/use-dark-mode'
 import FormHelp from '@shared/FormInput/Help'
 import Label from '@shared/FormInput/Label'
 import Moon from '@images/moon.svg'

src/components/Header/UserPreferences/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.css'
 import Currency from './Currency'
 import Debug from './Debug'
 import Caret from '@images/caret.svg'
-import useDarkMode from 'use-dark-mode'
+import useDarkMode from '@oceanprotocol/use-dark-mode'
 import Appearance from './Appearance'
 import TokenApproval from './TokenApproval'
 import { useMarketMetadata } from '@context/MarketMetadata'

src/components/Home/Bookmarks.tsx

@@ -48,7 +48,7 @@ export default function Bookmarks(): ReactElement {
   const newCancelToken = useCancelToken()
 
   useEffect(() => {
-    if (!appConfig?.metadataCacheUri || bookmarks === []) return
+    if (!appConfig?.metadataCacheUri || bookmarks?.length === 0) return
 
     async function init() {
       if (!bookmarks?.length) {

src/components/Publish/_utils.ts

@@ -1,9 +1,10 @@
 import {
   Config,
   DDO,
-  Erc20CreateParams,
   FreCreationParams,
   generateDid,
+  DatatokenCreateParams,
+  DispenserCreationParams,
   getHash,
   LoggerInstance,
   Metadata,
@@ -202,7 +203,7 @@ export async function createTokensAndPricing(
   LoggerInstance.log('[publish] Creating NFT with metadata', nftCreateData)
 
   // TODO: cap is hardcoded for now to 1000, this needs to be discussed at some point
-  const ercParams: Erc20CreateParams = {
+  const ercParams: DatatokenCreateParams = {
     templateIndex: 2,
     minter: accountId,
     paymentCollector: accountId,
@@ -238,7 +239,7 @@ export async function createTokensAndPricing(
         freParams
       )
 
-      const result = await nftFactory.createNftErc20WithFixedRate(
+      const result = await nftFactory.createNftWithDatatokenWithFixedRate(
         accountId,
         nftCreateData,
         ercParams,
@@ -257,7 +258,7 @@ export async function createTokensAndPricing(
       // maxTokens -  how many tokens cand be dispensed when someone requests . If maxTokens=2 then someone can't request 3 in one tx
       // maxBalance - how many dt the user has in it's wallet before the dispenser will not dispense dt
       // both will be just 1 for the market
-      const dispenserParams = {
+      const dispenserParams: DispenserCreationParams = {
         dispenserAddress: config.dispenserAddress,
         maxTokens: web3.utils.toWei('1'),
         maxBalance: web3.utils.toWei('1'),
@@ -270,7 +271,7 @@ export async function createTokensAndPricing(
         dispenserParams
       )
 
-      const result = await nftFactory.createNftErc20WithDispenser(
+      const result = await nftFactory.createNftWithDatatokenWithDispenser(
         accountId,
         nftCreateData,
         ercParams,

tsconfig.json

@@ -29,5 +29,5 @@
     "incremental": true
   },
   "exclude": ["node_modules", ".next", "*.js"],
-  "include": ["./src/**/*", "./tests/**/*", "./next-env.d.ts", "./content/**/*"]
+  "include": ["./src/**/*", "./.jest/**/*", "./next-env.d.ts", "./content/**/*"]
 }