fix barge connection (#1729)

* adding network 8896 (barge)

* Update ocean.ts

* development network with env variable

* temp patch for provider  url check

* removed logs

* fix typing error

* set local provider url to asset metadata

* clean development config

* wip make use of barge addresses

* update env vars from script

* more fixes

* cleanup

* update readme

* more readme updates

* cleanup fixes

* more fixes

* script readme updates

* update readme

* update readme

* bump oceanjs

* fix tests after oceanjs upgrade

* adding custom provider for mac barge

* fix test app.config path

* remove log

* added NEXT_PUBLIC_PROVIDER_URL to load dev env

* added env variable for mac on load dev env

* fre fixes

* review suggestions

* Update README.md

Co-authored-by: Jamie Hewitt <[email protected]>

* add private key example

* bump oceanlib

* fix build

* fix provider uri for mac

* add custom rpc env var example

* fix build

* update barge env vars script

* remove brage from supported and default chainIds by default

* remove log

---------

Co-authored-by: Bogdan Fazakas <[email protected]>
Co-authored-by: Jamie Hewitt <[email protected]>

.env.example

@@ -16,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',

README.md

@@ -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 agains 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`
 

app.config.js

@@ -16,6 +16,10 @@ module.exports = {
   // List of all supported chainIds. Used to populate the Chains user preferences list.
   chainIdsSupported: [1, 137, 5, 80001],
 
+  customProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL,
+
+  infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',
+
   defaultDatatokenTemplateIndex: 2,
   // The ETH address the marketplace fee will be sent to.
   marketFeeAddress:

package.json

@@ -10,6 +10,7 @@
     "build:static": "npm run build && next export",
     "serve": "serve -s public/",
     "pregenerate": "bash scripts/pregenerate.sh",
+    "set-barge-env": "bash scripts/barge-env.sh",
     "test": "npm run pregenerate && npm run lint && npm run type-check && npm run jest",
     "jest": "jest -c .jest/jest.config.js",
     "jest:watch": "jest -c .jest/jest.config.js --watch",

scripts/barge-env.sh

@@ -0,0 +1,2 @@
+# Set
+node ./scripts/load-development-addresses.js

scripts/load-development-addresses.js

@@ -0,0 +1,76 @@
+const fs = require('fs')
+const os = require('os')
+
+function getLocalAddresses() {
+  const data = JSON.parse(
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    fs.readFileSync(
+      `${os.homedir}/.ocean/ocean-contracts/artifacts/address.json`,
+      'utf8'
+    )
+  )
+  return data.development
+}
+
+function updateEnvVariable(key, value) {
+  fs.readFile('.env', 'utf8', (err, data) => {
+    if (err) {
+      console.error(err)
+      return
+    }
+
+    const lines = data.split('\n')
+
+    let keyExists = false
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]
+      if (line.startsWith(key + '=')) {
+        lines[i] = `${key}=${value}`
+        keyExists = true
+        break
+      }
+    }
+
+    if (!keyExists) {
+      lines.push(`${key}=${value}`)
+    }
+
+    const updatedContent = lines.join('\n')
+    fs.writeFile('.env', updatedContent, 'utf8', (err) => {
+      if (err) {
+        console.error(err)
+        return
+      }
+      console.log(
+        `Successfully ${
+          keyExists ? 'updated' : 'added'
+        } the ${key} environment variable.`
+      )
+    })
+  })
+}
+
+const addresses = getLocalAddresses()
+updateEnvVariable('NEXT_PUBLIC_NFT_FACTORY_ADDRESS', addresses.ERC721Factory)
+updateEnvVariable(
+  'NEXT_PUBLIC_OPF_COMMUNITY_FEE_COLECTOR',
+  addresses.OPFCommunityFeeCollector
+)
+updateEnvVariable(
+  'NEXT_PUBLIC_FIXED_RATE_EXCHANGE_ADDRESS',
+  addresses.FixedPrice
+)
+updateEnvVariable('NEXT_PUBLIC_DISPENSER_ADDRESS', addresses.Dispenser)
+updateEnvVariable('NEXT_PUBLIC_OCEAN_TOKEN_ADDRESS', addresses.Ocean)
+updateEnvVariable('NEXT_PUBLIC_MARKET_DEVELOPMENT', true)
+updateEnvVariable(
+  '#NEXT_PUBLIC_PROVIDER_URL',
+  '"http://127.0.0.1:8030" # only for mac'
+)
+updateEnvVariable(
+  `#NEXT_PUBLIC_SUBGRAPH_URI',"http://127.0.0.1:9000" # only for mac`
+)
+updateEnvVariable(
+  '#NEXT_PUBLIC_METADATACACHE_URI',
+  '"http://127.0.0.1:5000" # only for mac'
+)

scripts/write-networks-metadata.js

@@ -1,11 +1,33 @@
 #!/usr/bin/env node
 'use strict'
 
+const bargeNetwork = {
+  name: 'Ethereum Barge',
+  chain: 'ETH',
+  icon: 'ethereum',
+  rpc: ['http://127.0.0.1:8545'],
+  faucets: [],
+  nativeCurrency: {
+    name: 'Ether',
+    symbol: 'ETH',
+    decimals: 18
+  },
+  infoURL: 'https://ethereum.org',
+  shortName: 'eth',
+  chainId: 8996,
+  networkId: 8996,
+  slip44: 60,
+  ens: {},
+  explorers: []
+}
+
 const axios = require('axios')
 
 // https://github.com/ethereum-lists/chains
 const chainDataUrl = 'https://chainid.network/chains.json'
 
 axios(chainDataUrl).then((response) => {
+  response.data.push(bargeNetwork)
+  // const networks ={...response.data, ...bargeNetwork}
   process.stdout.write(JSON.stringify(response.data, null, '  '))
 })

src/@context/Asset.tsx

@@ -11,7 +11,7 @@ import { Config, LoggerInstance, Purgatory } from '@oceanprotocol/lib'
 import { CancelToken } from 'axios'
 import { getAsset } from '@utils/aquarius'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { getOceanConfig, getDevelopmentConfig } from '@utils/ocean'
+import { getOceanConfig, sanitizeDevelopmentConfig } from '@utils/ocean'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from './MarketMetadata'
@@ -180,13 +180,13 @@ function AssetProvider({
   // -----------------------------------
   useEffect(() => {
     if (!asset?.chainId) return
-
+    const config = getOceanConfig(asset?.chainId)
     const oceanConfig = {
-      ...getOceanConfig(asset?.chainId),
+      ...config,
 
       // add local dev values
       ...(asset?.chainId === 8996 && {
-        ...getDevelopmentConfig()
+        ...sanitizeDevelopmentConfig(config)
       })
     }
     setOceanConfig(oceanConfig)

src/@context/MarketMetadata/index.tsx

@@ -43,14 +43,13 @@ function MarketMetadataProvider({
           null,
           getQueryContext(appConfig.chainIdsSupported[i])
         )
-
         opcData.push({
           chainId: appConfig.chainIdsSupported[i],
-          approvedTokens: response.data?.opc.approvedTokens.map(
+          approvedTokens: response.data?.opc?.approvedTokens?.map(
             (token) => token.address
           ),
-          swapApprovedFee: response.data?.opc.swapOceanFee,
-          swapNotApprovedFee: response.data?.opc.swapNonOceanFee
+          swapApprovedFee: response.data?.opc?.swapOceanFee,
+          swapNotApprovedFee: response.data?.opc?.swapNonOceanFee
         } as OpcFee)
       }
       LoggerInstance.log('[MarketMetadata] Got new data.', {

src/@utils/accessDetailsAndPricing.ts

@@ -14,7 +14,8 @@ import { getFixedBuyPrice } from './ocean/fixedRateExchange'
 import Decimal from 'decimal.js'
 import {
   consumeMarketOrderFee,
-  publisherMarketOrderFee
+  publisherMarketOrderFee,
+  customProviderUrl
 } from '../../app.config'
 import { Signer } from 'ethers'
 import { toast } from 'react-toastify'
@@ -186,7 +187,7 @@ export async function getOrderPriceAndFees(
         asset?.services[0].id,
         0,
         accountId,
-        asset?.services[0].serviceEndpoint
+        customProviderUrl || asset?.services[0].serviceEndpoint
       ))
   } catch (error) {
     const message = getErrorMessage(JSON.parse(error.message))

src/@utils/nft.ts

@@ -10,6 +10,7 @@ import {
   getErrorMessage
 } from '@oceanprotocol/lib'
 import { SvgWaves } from './SvgWaves'
+import { customProviderUrl } from '../../app.config'
 import { Signer, ethers } from 'ethers'
 import { toast } from 'react-toastify'
 
@@ -108,7 +109,7 @@ export async function setNftMetadata(
     encryptedDdo = await ProviderInstance.encrypt(
       asset,
       asset.chainId,
-      asset.services[0].serviceEndpoint,
+      customProviderUrl || asset.services[0].serviceEndpoint,
       signal
     )
   } catch (err) {
@@ -150,7 +151,7 @@ export async function setNFTMetadataAndTokenURI(
     encryptedDdo = await ProviderInstance.encrypt(
       asset,
       asset.chainId,
-      asset.services[0].serviceEndpoint,
+      customProviderUrl || asset.services[0].serviceEndpoint,
       signal
     )
   } catch (err) {

src/@utils/ocean/index.ts

@@ -1,21 +1,46 @@
 import { ConfigHelper, Config } from '@oceanprotocol/lib'
 import { ethers } from 'ethers'
-
 import abiDatatoken from '@oceanprotocol/contracts/artifacts/contracts/templates/ERC20TemplateEnterprise.sol/ERC20TemplateEnterprise.json'
 
+/**
+  This function takes a Config object as an input and returns a new sanitized Config object
+  The new Config object has the same properties as the input object, but with some values replaced by environment variables if they exist
+  Also adds missing contract addresses deployed when running barge locally
+  @param {Config} config - The input Config object
+  @returns {Config} A new Config object
+*/
+export function sanitizeDevelopmentConfig(config: Config): Config {
+  return {
+    subgraphUri: process.env.NEXT_PUBLIC_SUBGRAPH_URI || config.subgraphUri,
+    metadataCacheUri:
+      process.env.NEXT_PUBLIC_METADATACACHE_URI || config.metadataCacheUri,
+    providerUri: process.env.NEXT_PUBLIC_PROVIDER_URL || config.providerUri,
+    nodeUri: process.env.NEXT_PUBLIC_RPC_URL || config.nodeUri,
+    fixedRateExchangeAddress:
+      process.env.NEXT_PUBLIC_FIXED_RATE_EXCHANGE_ADDRESS,
+    dispenserAddress: process.env.NEXT_PUBLIC_DISPENSER_ADDRESS,
+    oceanTokenAddress: process.env.NEXT_PUBLIC_OCEAN_TOKEN_ADDRESS,
+    nftFactoryAddress: process.env.NEXT_PUBLIC_NFT_FACTORY_ADDRESS
+  } as Config
+}
+
 export function getOceanConfig(network: string | number): Config {
-  const config = new ConfigHelper().getConfig(
+  let config = new ConfigHelper().getConfig(
     network,
     network === 'polygon' ||
       network === 'moonbeamalpha' ||
       network === 1287 ||
       network === 'bsc' ||
       network === 56 ||
       network === 'gaiaxtestnet' ||
-      network === 2021000
+      network === 2021000 ||
+      network === 8996
       ? undefined
       : process.env.NEXT_PUBLIC_INFURA_PROJECT_ID
   ) as Config
+  if (network === 8996) {
+    config = { ...config, ...sanitizeDevelopmentConfig(config) }
+  }
   return config as Config
 }