Merge pull request #435 from deltaDAO/development

Development

.env.example

@@ -1,4 +1,5 @@
 #NEXT_PUBLIC_INFURA_PROJECT_ID="xxx"
+#NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="xxx"
 #NEXT_PUBLIC_MARKET_FEE_ADDRESS="0xxx"
 #NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
 #NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE="1"
@@ -15,3 +16,15 @@
 
 # Privacy Preference Center
 #NEXT_PUBLIC_PRIVACY_PREFERENCE_CENTER="true"
+
+# Development Preference Center
+#NEXT_PUBLIC_NFT_FACTORY_ADDRESS='0xxx'
+#NEXT_PUBLIC_OPF_COMMUNITY_FEE_COLECTOR='0xxx'
+#NEXT_PUBLIC_FIXED_RATE_EXCHANGE_ADDRESS='0xxx'
+#NEXT_PUBLIC_DISPENSER_ADDRESS='0xxx'
+#NEXT_PUBLIC_OCEAN_TOKEN_ADDRESS='0xxx'
+#NEXT_PUBLIC_MARKET_DEVELOPMENT='true'
+#NEXT_PUBLIC_PROVIDER_URL="http://xxx:xxx"
+#NEXT_PUBLIC_SUBGRAPH_URI="http://xxx:xxx"
+#NEXT_PUBLIC_METADATACACHE_URI="http://xxx:xxx"
+#NEXT_PUBLIC_RPC_URI="http://xxx:xxx"

.jest/__fixtures__/datasetsWithAccessDetails.ts

@@ -157,9 +157,9 @@ export const assets: AssetExtended[] = [
       allocated: 45554.69921875,
       orders: 1,
       price: {
-        value: 3231343254,
-        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-        tokenSymbol: 'OCEAN'
+        tokenAddress: '0x282d8efCe846A88B159800bd4130ad77443Fa1A1',
+        tokenSymbol: 'mOCEAN',
+        value: 100
       }
     },
     version: '4.1.0',
@@ -1113,9 +1113,7 @@ export const assets: AssetExtended[] = [
       allocated: 11159.279296875,
       orders: 1,
       price: {
-        value: 3231343254,
-        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-        tokenSymbol: 'OCEAN'
+        value: 0
       }
     },
     version: '4.1.0',
@@ -1198,9 +1196,7 @@ export const assets: AssetExtended[] = [
     stats: {
       orders: 0,
       price: {
-        value: 3231343254,
-        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-        tokenSymbol: 'OCEAN'
+        value: 0
       }
     },
     version: '4.1.0',
@@ -1448,9 +1444,7 @@ export const assets: AssetExtended[] = [
     stats: {
       orders: 0,
       price: {
-        value: 3231343254,
-        tokenAddress: '0xCfDdA22C9837aE76E0faA845354f33C62E03653a',
-        tokenSymbol: 'OCEAN'
+        value: 0
       }
     },
     version: '4.1.0',

.jest/__fixtures__/wagni.ts

@@ -0,0 +1,5 @@
+export const network = {
+  account: '0x123',
+  chainId: 1,
+  networkId: 1
+}

.jest/__mocks__/connectkit.js

@@ -0,0 +1,3 @@
+export function getDefaultClient() {
+  return jest.fn()
+}

.jest/__mocks__/hooksMocks.ts

@@ -1,7 +1,7 @@
 import marketMetadata from '../__fixtures__/marketMetadata'
 import userPreferences from '../__fixtures__/userPreferences'
 import searchBarStatus from '../__fixtures__/searchBarStatus'
-import web3 from '../__fixtures__/web3'
+import { network } from '../__fixtures__/wagni'
 import { asset } from '../__fixtures__/datasetWithAccessDetails'
 
 jest.mock('../../src/@context/MarketMetadata', () => ({
@@ -12,14 +12,17 @@ jest.mock('../../src/@context/UserPreferences', () => ({
   useUserPreferences: () => userPreferences
 }))
 
-jest.mock('../../src/@context/Web3', () => ({
-  useWeb3: () => web3
-}))
-
 jest.mock('../../../@context/Asset', () => ({
   useAsset: () => ({ asset })
 }))
 
+jest.mock('wagmi', () => ({
+  useNetwork: () => ({ network }),
+  useSwitchNetwork: () => ({ switchNetwork: () => jest.fn() }),
+  useProvider: () => jest.fn(),
+  createClient: () => jest.fn()
+}))
+
 jest.mock('../../@context/SearchBarStatus', () => ({
   useSearchBarStatus: () => searchBarStatus
 }))

.jest/jest.setup.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { jest } from '@jest/globals'
 import './__mocks__/matchMedia'
 import './__mocks__/hooksMocks'
+import './__mocks__/connectkit'
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn().mockImplementation(() => ({

.storybook/main.js

@@ -43,7 +43,10 @@ module.exports = {
       crypto: false,
       os: false,
       stream: false,
-      assert: false
+      assert: false,
+      tls: false,
+      net: false,
+      zlib: false
     })
     config.resolve.fallback = fallback
 

README.md

@@ -42,7 +42,7 @@ The app is a React app built with [Next.js](https://nextjs.org) + TypeScript + C
 Prerequisites:
 
 - [Node.js](https://nodejs.org/en/) (required). Check the [.nvmrc](.nvmrc) file to make sure you are using the correct version of Node.js.
-- [nvm](https://github.com/nvm-sh/nvm) (recommended). This is the recommend way to manage Node.js versions.
+- [nvm](https://github.com/nvm-sh/nvm) (recommended). This is the recommended way to manage Node.js versions.
 - [Git](https://git-scm.com/) is required to follow the instructions below.
 
 To start local development:
@@ -65,34 +65,30 @@ This will start the development server under
 
 ### Local components with Barge
 
-If you prefer to connect to locally running components instead of remote connections, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local Ganache network in another terminal before running `npm start`:
+Using the `ocean-market` with `barge` components is recommended for advanced users, if you are new we advice you to use the `ocean-market` first with remote networks. If you prefer to connect to locally running components instead of remote connections, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local Ganache network in another terminal before running `npm start`. To fully test all [The Graph](https://thegraph.com) integrations, you have to start barge with the local Graph node:
 
 ```bash
 git clone [email protected]:oceanprotocol/barge.git
 cd barge
 
-# startup with local Ganache node
-./start_ocean.sh
+# startup with local Ganache and Graph nodes
+./start_ocean.sh --with-thegraph
 ```
 
-Barge will deploy contracts to the local Ganache node which will take some time. At the end the compiled artifacts need to be copied over to this project into `node_modules/@oceanprotocol/contracts/artifacts`. This script will do that for you:
+Barge will deploy contracts to the local Ganache node which will take some time. At the end the compiled artifacts need to imported over to this project as environment variables. The `set-barge-env` script will do that for you and set the env variables to use this local connection in `.env` in the app. You also need to append the `chainIdsSupported` array with the barge's ganache chainId (`8996`) in the `app.config.js` file.
 
-```bash
-./scripts/copy-contracts.sh
-```
+If you are using `macOS` operating system you should also make same changes to the provider url since the default barge ip can not be accessed due to some network constraints on `macOs`. So we should be using the `127.0.0.1:8030` (if you have changed the provider port please use that here as well) for each direct call from the market to provider, but we should keep the internal barge url `http://172.15.0.4:8030/` (this is the default ip:port for provider in barge, if changed please use the according url). So on inside `src/@utils/provider.ts` if on `macOS` you can hardcode this env variable `NEXT_PUBLIC_PROVIDER_URL` or set
+`127.0.0.1:8030` as `providerUrl` on all the methods that call `ProviderInstance` methods. (eg: `getEncryptedFiles`, `getFileDidInfo`, `downloadFile` etc). You should use the same provider url for `src/@utils/nft.ts` inside `setNFTMetadataAndTokenURI` and `setNftMetadata` and `src/components/Publish/index.tsx` inisde `encrypt` method (if you set the env variable there's no need to do this). You also need to use local ip's for the subgraph (`127.0.0.1` instead of `172.15.0.15`) and the metadatacache (`127.0.0.1` instead of `172.15.0.5`).
 
-Finally, set environment variables to use this local connection in `.env` in the app:
+Once you want to switch back to using the market against remote networks you need to comment or remove the env vars that are set by `set-barge-env` script.
 
 ```bash
-# modify env variables
-cp .env.example .env
-
+cd market
+npm run set-barge-env
 npm start
 ```
 
-To use the app together with MetaMask, importing one of the accounts auto-generated by the Ganache container is the easiest way to have test ETH available. All of them have 100 ETH by default. Upon start, the `ocean_ganache_1` container will print out the private keys of multiple accounts in its logs. Pick one of them and import into MetaMask.
-
-To fully test all [The Graph](https://thegraph.com) integrations, you have to run your own local Graph node with our [`ocean-subgraph`](https://github.com/oceanprotocol/ocean-subgraph) deployed to it. Barge does not include a local subgraph so by default, the `subgraphUri` is hardcoded to the Goerli subgraph in our [`getDevelopmentConfig` function](https://github.com/oceanprotocol/market/blob/d0b1534d105e5dcb3790c65d4bb04ff1d2dbc575/src/utils/ocean.ts#L31).
+To use the app together with MetaMask, importing one of the accounts auto-generated by the Ganache container is the easiest way to have test ETH available. All of them have 100 ETH by default. Upon start, the `ocean_ganache_1` container will print out the private keys of multiple accounts in its logs. Pick one of them and import into MetaMask. Barge private key example : `0xc594c6e5def4bab63ac29eed19a134c130388f74f019bc74b8f4389df2837a58`
 
 > Cleaning all Docker images so they are fetched freshly is often a good idea to make sure no issues are caused by old or stale images: `docker system prune --all --volumes`
 
@@ -238,12 +234,12 @@ function Component() {
 For account purgatory:
 
 ```tsx
-import { useWeb3 } from '@context/Web3'
+import { useAccount } from 'wagmi'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 
 function Component() {
-  const { accountId } = useWeb3()
-  const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
+  const { address } = useAccount()
+  const { isInPurgatory, purgatoryData } = useAccountPurgatory(address)
   return isInPurgatory ? <div>{purgatoryData.reason}</div> : null
 }
 ```
@@ -252,14 +248,12 @@ function Component() {
 
 All displayed chain & network metadata is retrieved from `https://chainid.network` on build time and integrated into NEXT's GraphQL layer. This data source is a community-maintained GitHub repository under [ethereum-lists/chains](https://github.com/ethereum-lists/chains).
 
-Within components this metadata can be queried for under `allNetworksMetadataJson`. The `useWeb3()` hook does this in the background to expose the final `networkDisplayName` for use in components:
+Within components this metadata can be queried for under `allNetworksMetadataJson`. The `useNetworkMetadata()` hook does this in the background to expose the final `networkDisplayName` for use in components:
 
 ```tsx
 export default function NetworkName(): ReactElement {
-  const { networkId, isTestnet } = useWeb3()
-  const { networksList } = useNetworkMetadata()
-  const networkData = getNetworkDataById(networksList, networkId)
-  const networkName = getNetworkDisplayName(networkData)
+  const { isTestnet } = useNetworkMetadata()
+  const { networkData, networkName } = useNetworkMetadata()
 
   return (
     <>
@@ -304,7 +298,7 @@ Test runs utilize [Jest](https://jestjs.io/) as test runner and [Testing Library
 
 All created Storybook stories will automatically run as individual tests by using the [StoryShots Addon](https://storybook.js.org/addons/@storybook/addon-storyshots).
 
-Creating Storybook stories for a component will provide good coverage of a component in many cases. Additional tests for dedicated component functionality which can't be done with Storybook are created as usual [Testing Library](https://testing-library.com/docs/react-testing-library/intro) tests, but you can also [import exisiting Storybook stories](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) into those tests.
+Creating Storybook stories for a component will provide good coverage of a component in many cases. Additional tests for dedicated component functionality which can't be done with Storybook are created as usual [Testing Library](https://testing-library.com/docs/react-testing-library/intro) tests, but you can also [import existing Storybook stories](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) into those tests.
 
 Executing linting, type checking, and full test run:
 

address.config.js

@@ -26,12 +26,12 @@ module.exports = {
         'did:op:dd456754dc659ef111cc5fa87662cda1a67ca390c3f86fee4d5592ecb3bbffd5', // Supplier No. 1 - Component Data for Part Matching
         'did:op:bd2d41775c5041361d899f30734920af6383c3ca5838d06fa4649cba9c94192e', // Supplier No. 2 - Component Data for Part Matching
         'did:op:adb67df12b41a4089e0d3f4933bab5254bb905657b92b35bcd1cbcefc836fee5', // Component Matching Aggregation Algorithm
-        'did:op:df64a2b05a8de027a94c0f4a99af63650667d2e5e723bebc9229a368ac452447', // Data Part No. 598 
+        'did:op:df64a2b05a8de027a94c0f4a99af63650667d2e5e723bebc9229a368ac452447', // Data Part No. 598
         'did:op:bd74d6a281ba414de2b4d8ee4087277575f95676bd74e20ee9e2960c9c38d7c5', // ToolCondition-Algorithm - EuProGigant
-        'did:op:a3da777fd3711da36d5e1e5904a8c074b6e8df51549db2b6c8a5bc7ec3ab60cf', // CO2-Estimate Algorithm - EuProGigant 
+        'did:op:a3da777fd3711da36d5e1e5904a8c074b6e8df51549db2b6c8a5bc7ec3ab60cf', // CO2-Estimate Algorithm - EuProGigant
         'did:op:104f5b221177ced601fb501e992fac93b762946e3636e6b897af2e08803dd0e6', // Quality Data of IFT TU Wien Material Number 00.954669 Serial Number 1
         'did:op:bb31dedd26cbf37c83f71cc427f5a27dbf0f8190bcb5724b7fbe8c7895f39e21', // Quality Data of PTW TUDa Material Number 00.954668 Serial Number 1
-        'did:op:14a708141e6cee588b8ee31aab3bee5b54e0cb12689ccee183d031e36b5f474d'  // Data Part No. 593
+        'did:op:14a708141e6cee588b8ee31aab3bee5b54e0cb12689ccee183d031e36b5f474d' // Data Part No. 593
       ]
     },
     {
@@ -42,7 +42,7 @@ module.exports = {
         'did:op:dc0765630d1ca3fbfb8f03d7ef63743ab5c4b585b599723476c8122106f34271', // CrossAsia Text Analysis - State Library of Berlin
         'did:op:bff53f8c36f2156cff80e5fa18f39d76cb3c52617694a7cde4635826209c259c', // CrossAsia Text Analysis Algorithm
         'did:op:9308b56b84b2475ff8e9a8251adba96dbd9461bd528ef4b0c98638d11ab5375b', // BIMKIT Text Localization in Architectural Floor Plans
-        'did:op:1c77a8c28444f5405d8a23ad88d5579c12be574712378ca5b5a6385730412e1c',  // BIMKIT Algorithm for Text Localization in Architectural Floor Plans
+        'did:op:1c77a8c28444f5405d8a23ad88d5579c12be574712378ca5b5a6385730412e1c', // BIMKIT Algorithm for Text Localization in Architectural Floor Plans
         'did:op:f231ad11244f2c2e86d694a24765d49dccdaddf1b48b4b0b74ebd586a44bac39', // Die Handelswege und Verkehrsmittel der Gegenwart
         'did:op:b6e20571d7b403895aed65e0d5156e4a1dad809c969c38c6fc2154bb26c33d12', // Stanley's sämtliche Reisen in Afrika
         'did:op:2add32a20d0ee146c51424907c1a4397f50d985cb88f0738c79cc5602e2b70a7' // Eines deutschen Matrosen Nordpolarfahrten
@@ -56,7 +56,7 @@ module.exports = {
         'did:op:b41ec3fbb97bf0a59a5ada5c5bf3f4432f548cadd28ca07884168068cfe30cae', // GraphQL Demo - Download (FREE)
         'did:op:020543f761a65f3f6831730fa865d606f23d33c547e2c2596407208b573f10a7', // GraphQL Demo - Product Quantity Computation Algorithm
         'did:op:5ba2181701538eb73ed81bf91d386accd5bb9afb1e850945b38c945d04850bfe', // GraphQL Demo - Download (OCEAN)
-        'did:op:78e88197730d01625963e3461f18dc89bfc6f8fdf2d146df9a076bb1d2f8d4a8'  // GraphQL Demo - Compute (OCEAN)
+        'did:op:78e88197730d01625963e3461f18dc89bfc6f8fdf2d146df9a076bb1d2f8d4a8' // GraphQL Demo - Compute (OCEAN)
       ]
     }
   ]

app.config.js

@@ -1,5 +1,3 @@
-const { getDefaultChainIds, getSupportedChainIds } = require('./chains.config')
-
 module.exports = {
   // URI of single metadata cache instance for all networks.
   // While ocean.js includes this value for each network as part of its ConfigHelper,
@@ -20,10 +18,12 @@ module.exports = {
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: getDefaultChainIds(),
+  chainIds: [100, 80001],
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: getSupportedChainIds(),
+  chainIdsSupported: [100, 80001],
+
+  customProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL,
 
   infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',
 
@@ -76,5 +76,13 @@ module.exports = {
     'https://raw.githubusercontent.com/deltaDAO/mvg-portal/v4/content/pages/terms.md',
 
   // Purgatory URI, leave as an empty string to disable the API call
-  purgatoryUrl: process.env.NEXT_PUBLIC_PURGATORY_URI || ''
+  purgatoryUrl: process.env.NEXT_PUBLIC_PURGATORY_URI || '',
+
+  // The url used to fetch docker hub image info
+  dockerHubProxyUrl:
+    process.env.NEXT_PUBLIC_DOCKER_HUB_PROXY_URL ||
+    'https://dockerhub-proxy.delta-dao.com',
+
+  // Display alert banner for the developer preview deployment
+  showPreviewAlert: process.env.NEXT_PUBLIC_SHOW_PREVIEW_ALERT || 'false'
 }

chains.config.js

@@ -10,7 +10,7 @@ const chains = [
     isDefault: true,
     metadataCacheUri: 'https://aquarius510.v4.delta-dao.com',
     nodeUri: 'https://rpc.genx.minimal-gaia-x.eu',
-    providerUri: 'https://provider.v4.genx.delta-dao.com',
+    providerUri: 'https://provider.v4.delta-dao.com',
     subgraphUri: 'https://subgraph.v4.genx.minimal-gaia-x.eu',
     explorerUri: 'https://explorer.pontus-x.eu',
     oceanTokenAddress: '0x0995527d3473b3a98c471f1ed8787acd77fbf009',
@@ -33,6 +33,11 @@ const chains = [
     DFStrategyV1: '0x1be9C72500B41c286C797D4FE727747Ae9C4E195',
     veFeeEstimate: '0xCFeF55c6ae4d250586e293f29832967a04A9087d',
     providerAddress: '0x68C24FA5b2319C81b34f248d1f928601D2E5246B'
+  },
+  {
+    chainId: 80001,
+    metadataCacheUri: 'https://aquarius510.v4.delta-dao.com',
+    providerUri: 'https://provider.dev-v4.mumbai.delta-dao.com'
   }
 ]
 

content/pages/editMetadata.json

@@ -157,6 +157,28 @@
         "placeholder": "e.g. logistics",
         "required": false
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Algorithm custom parameters",
+        "help": "Algorithm custom parameters are used to define required consumer input before running the algorithm in a Compute-to-Data environment.",
+        "type": "checkbox",
+        "options": ["This asset uses algorithm custom parameters"],
+        "required": false
+      },
+      {
+        "name": "allow",
+        "label": "Allow ETH Address",
+        "placeholder": "e.g. 0xe328aB96B7CbB55A6E1c1054678137bA09780acA",
+        "help": "Enter an ETH address and click the ADD button to append to the list. Only ETH addresses in the allow list can consume this asset. If the list is empty anyone can download or compute this asset.",
+        "type": "credentials"
+      },
+      {
+        "name": "deny",
+        "label": "Deny ETH Address",
+        "placeholder": "e.g. 0xe328aB96B7CbB55A6E1c1054678137bA09780acA",
+        "help": "Enter an ETH address and click the ADD button to append to the list. If an ETH address is in the deny list, download or compute of this asset will be denied for that ETH address.",
+        "type": "credentials"
+      },
       {
         "name": "paymentCollector",
         "label": "Payment Collector Address",
@@ -178,6 +200,14 @@
         "sortOptions": false,
         "required": false
       },
+      {
+        "name": "usesServiceConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
+      },
       {
         "name": "license",
         "label": "License",

content/pages/privacy/en.md

@@ -3,7 +3,7 @@ title: Privacy Policy
 description: This privacy policy informs you about how deltaDAO AG (in the following deltaDAO) processes your personal data when you visit our portal demonstrator, when you use one of our portal demonstrator functionalities and when you contact us. Moreover, this privacy policy informs you about your rights.
 ---
 
-## Table of contents
+### Table of contents
 
 ## 1. Contact details of the controller and Data Protection Officer