Fix development with Barge (#369)

* add contracts copying script

* AssetList failsafe against unexpected Aquarius responses

* grab dev contract addresses from address.json

* script fix

* fix auto-connection in NetworkMonitor

* update dev instructions

* remove the last_block Aquarius workaround

* fix providerUri switch in file input

README.md

@@ -58,13 +58,25 @@ cd barge
 ./start_ocean.sh
 ```
 
+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:
+
+```bash
+./scripts/copy-contracts.sh
+```
+
 Finally, set environment variables to use this local connection in `.env` in the app:
 
 ```bash
-# modify env variables, Rinkeby is enabled by default when using those files
+# modify env variables, setting GATSBY_NETWORK="development"
 cp .env.example .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.
+
+> 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`
+
 ## 🦑 Environment variables
 
 The `app.config.js` file is setup to prioritize environment variables for setting each Ocean component endpoint. By setting environment variables, you can easily switch between Ocean networks the app connects to, without directly modifying `app.config.js`.

scripts/copy-contracts.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+
+# Wait for contracts migration and extract artifacts
+
+RETRY_COUNT=0
+COMMAND_STATUS=1
+
+printf '\n\e[33m◯ Waiting for contracts to be generated...\e[0m\n'
+
+mkdir -p artifacts
+
+until [ $COMMAND_STATUS -eq 0 ] || [ $RETRY_COUNT -eq 120 ]; do
+  contracts_docker_id=$(docker container ls | grep contracts | awk '{print $1}')
+  docker cp "${contracts_docker_id}":/ocean-contracts/artifacts/ready ./artifacts/ > /dev/null 2>&1
+  COMMAND_STATUS=$?
+  sleep 5
+  (( RETRY_COUNT=RETRY_COUNT+1 ))
+done
+
+printf '\e[32m✔ Found new contract artifacts.\e[0m\n'
+
+rm -rf ./artifacts/
+
+if [ $COMMAND_STATUS -ne 0 ]; then
+  echo "Waited for more than two minutes, but contracts have not been migrated yet. Did you run an Ethereum RPC client and the migration script?"
+  exit 1
+fi
+
+docker cp "${contracts_docker_id}":/ocean-contracts/artifacts/. ./node_modules/@oceanprotocol/contracts/artifacts/
+
+printf '\e[32m✔ Copied new contract artifacts.\e[0m\n'

src/components/molecules/FormFields/FilesInput/index.tsx

@@ -38,7 +38,7 @@ export default function FilesInput(props: InputProps): ReactElement {
     return () => {
       source.cancel()
     }
-  }, [fileUrl])
+  }, [fileUrl, config.providerUri])
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {
     // hack so the onBlur-triggered validation does not show,

src/components/organisms/AssetList.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames/bind'
 const cx = classNames.bind(styles)
 
 declare type AssetListProps = {
-  assets: Array<any>
+  assets: DDO[]
   showPagination: boolean
   page?: number
   totalPages?: number
@@ -38,7 +38,7 @@ const AssetList: React.FC<AssetListProps> = ({
     <>
       <div className={styleClasses}>
         {assets.length > 0 ? (
-          assets.map((ddo: DDO) => <AssetTeaser ddo={ddo} key={ddo.id} />)
+          assets.map((ddo) => <AssetTeaser ddo={ddo} key={ddo.id} />)
         ) : (
           <div className={styles.empty}>No results found.</div>
         )}

src/helpers/NetworkMonitor.tsx

@@ -3,8 +3,10 @@ import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
 import { Logger } from '@oceanprotocol/lib'
 import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
+import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
 
 const refreshInterval = 5000 // 5 sec.
+
 export function NetworkMonitor(): ReactElement {
   const {
     connect,
@@ -26,10 +28,12 @@ export function NetworkMonitor(): ReactElement {
 
       // add local dev values
       ...(chainId === '8996' && {
-        factoryAddress: '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f',
+        factoryAddress: contractAddresses.development?.DTFactory,
-        poolFactoryAddress: '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4',
+        poolFactoryAddress: contractAddresses.development?.BFactory,
-        fixedRateExchangeAddress: '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8',
+        fixedRateExchangeAddress:
-        metadataContractAddress: '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
+          contractAddresses.development?.FixedRateExchange,
+        metadataContractAddress: contractAddresses.development?.Metadata,
+        oceanTokenAddress: contractAddresses.development?.Ocean
       })
     }
 
@@ -39,6 +43,8 @@ export function NetworkMonitor(): ReactElement {
       Logger.error(error.message)
     }
   }
+
+  // Periodically refresh wallet balance
   useEffect(() => {
     if (!account) return
 
@@ -49,6 +55,7 @@ export function NetworkMonitor(): ReactElement {
       clearInterval(balanceInterval)
     }
   }, [networkId, account])
+
   // Re-connect on mount when network is different from user network.
   // Bit nasty to just overwrite the initialConfig passed to OceanProvider
   // while it's connecting to that, but YOLO.
@@ -56,9 +63,14 @@ export function NetworkMonitor(): ReactElement {
     if (!web3 || !networkId) return
 
     async function init() {
+      const chainIdWeb3 = await web3.eth.getChainId()
+      const chainIdConfig = (config as ConfigHelperConfig).networkId
+
+      // HEADS UP! MetaMask built-in `Localhost 8545` network selection
+      // will have `1337` as chainId but we use `8996` in our config
       if (
-        (await web3.eth.getChainId()) ===
+        chainIdWeb3 === chainIdConfig ||
-        (config as ConfigHelperConfig).networkId
+        (chainIdWeb3 === 1337 && chainIdConfig === 8996)
       )
         return