Merge pull request #120 from oceanprotocol/feature/mainnet

Mainnet

.env.example

@@ -2,5 +2,4 @@
 GATSBY_NETWORK="rinkeby"
 
 #GATSBY_INFURA_PROJECT_ID="xxx"
-#GATSBY_METADATA_CACHE_URI="xxx"
 #GATSBY_MARKET_FEE_ADDRESS="0xxx"

README.md

@@ -19,8 +19,7 @@
 - [🛳 Production](#-production)
 - [⬆️ Deployment](#️-deployment)
   - [Manual Deployment](#manual-deployment)
-- [🏗 Ocean Protocol Infrastructure](#-ocean-protocol-infrastructure)
-- [🏛 License](#-license)
+- [<EFBFBD> License](#-license)
 
 ## 🏄 Get Started
 
@@ -154,34 +153,6 @@ vercel
 vercel alias
 ```
 
-## 🏗 Ocean Protocol Infrastructure
-
-The following Metadata Store & Provider instances specifically for marketplace are deployed in Ocean Protocol's AWS K8:
-
-**Rinkeby (Staging)**
-
-- K8 namespace: `xxx`
-- `[aquarius.rinkeby.v3.dev-ocean.com](https://aquarius.rinkeby.v3.dev-ocean.com)`
-- `[provider.rinkeby.v3.dev-ocean.com](https://provider.rinkeby.v3.dev-ocean.com)`
-
-Edit command with `kubectl`, e.g.:
-
-```bash
-kubectl edit deployment -n xxx aquarius
-```
-
-**Main (Production)**
-
-- K8 namespace: `xxx`
-- `xxx`
-- `xxx`
-
-Edit command with `kubectl`, e.g.:
-
-```bash
-kubectl edit deployment -n xxx aquarius
-```
-
 ## 🏛 License
 
 ```text

app.config.js

@@ -1,7 +1,10 @@
 module.exports = {
+  // The default network and its associated config the app should connect to
+  // on start. App will automatically switch network configs when user switches
+  // networks in their wallet.
+  // Ocean Protocol contracts are deployed for: 'mainnet', 'rinkeby', 'development'
   network: process.env.GATSBY_NETWORK || 'rinkeby',
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
-  metadataCacheUri: process.env.GATSBY_METADATA_CACHE_URI,
   // The ETH address the marketplace fee will be sent to.
   marketFeeAddress:
     process.env.GATSBY_MARKET_FEE_ADDRESS ||

src/components/molecules/Wallet/Account.tsx

@@ -2,7 +2,7 @@ import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
 import React, { FormEvent } from 'react'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
-import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet'
+import { accountTruncate } from '../../../utils/wallet'
 import Status from '../../atoms/Status'
 import styles from './Account.module.css'
 
@@ -24,7 +24,7 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
   const { accountId, status, connect, networkId } = useOcean()
-  const hasSuccess = status === 1 && isCorrectNetwork(networkId)
+  const hasSuccess = status === 1 && networkId === 1
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in

src/components/molecules/Wallet/Details.module.css

@@ -1,5 +1,6 @@
 .details {
   padding: calc(var(--spacer) / 4);
+  min-width: 17rem;
 }
 
 .details > section[class*='feedback'] {

src/components/molecules/Wallet/Details.tsx

@@ -3,14 +3,13 @@ import Button from '../../atoms/Button'
 import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
-import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function Details(): ReactElement {
-  const { balance, connect, logout, networkId } = useOcean()
+  const { balance, connect, logout } = useOcean()
   const { locale } = useUserPreferences()
 
   return (
@@ -27,11 +26,7 @@ export default function Details(): ReactElement {
         ))}
 
         <li className={styles.actions}>
-          <span title="Connected provider">
-            {getInjectedProviderName()}
-            <br />
-            {getNetworkName(networkId)}
-          </span>
+          <span title="Connected provider">{getInjectedProviderName()}</span>
           <Button
             style="text"
             size="small"

src/components/molecules/Wallet/Feedback.tsx

@@ -2,8 +2,7 @@ import React, { ReactElement } from 'react'
 import Status from '../../atoms/Status'
 import styles from './Feedback.module.css'
 import { useOcean } from '@oceanprotocol/react'
-import { isCorrectNetwork } from '../../../utils/wallet'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import { getNetworkName } from '../../../utils/wallet'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -16,23 +15,18 @@ export default function Web3Feedback({
 }: {
   isBalanceSufficient?: boolean
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
   const { account, status, networkId } = useOcean()
   const isOceanConnectionError = status === -1
-  const correctNetwork = isCorrectNetwork(networkId)
+  const isMainnet = networkId === 1
   const showFeedback =
     !account ||
     isOceanConnectionError ||
-    !correctNetwork ||
+    !isMainnet ||
     isBalanceSufficient === false
 
-  const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
-    c.toUpperCase()
-  )
-
   const state = !account
     ? 'error'
-    : !correctNetwork
+    : !isMainnet
     ? 'warning'
     : account && isBalanceSufficient
     ? 'success'
@@ -42,8 +36,8 @@ export default function Web3Feedback({
     ? 'No account connected'
     : isOceanConnectionError
     ? 'Error connecting to Ocean'
-    : !correctNetwork
-    ? 'Wrong Network'
+    : !isMainnet
+    ? getNetworkName(networkId)
     : account
     ? isBalanceSufficient === false
       ? 'Insufficient balance'
@@ -54,8 +48,8 @@ export default function Web3Feedback({
     ? 'Please connect your Web3 wallet.'
     : isOceanConnectionError
     ? 'Please try again.'
-    : !correctNetwork
-    ? `Please connect to ${desiredNetworkName}.`
+    : !isMainnet
+    ? undefined
     : isBalanceSufficient === false
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'
@@ -64,7 +58,7 @@ export default function Web3Feedback({
     <section className={styles.feedback}>
       <Status state={state} aria-hidden />
       <h3 className={styles.title}>{title}</h3>
-      <p className={styles.error}>{message}</p>
+      {message && <p className={styles.error}>{message}</p>}
     </section>
   ) : null
 }

src/components/organisms/AssetActions/Consume.module.css

@@ -20,3 +20,7 @@
 .hasTokens {
   composes: hasTokens from './index.module.css';
 }
+
+.feedback {
+  width: 100%;
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css

@@ -56,7 +56,5 @@
 .alertArea {
   margin-left: -2rem;
   margin-right: -2rem;
-  padding: var(--spacer) calc(var(--spacer) / 2);
-  padding-bottom: 0;
-  margin-top: var(--spacer);
+  padding: 0 calc(var(--spacer) / 2);
 }

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -1,8 +1,6 @@
 import { useOcean, usePricing } from '@oceanprotocol/react'
 import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
-import { isCorrectNetwork } from '../../../../../utils/wallet'
 import Alert from '../../../../atoms/Alert'
 import FormHelp from '../../../../atoms/Input/Help'
 import Tooltip from '../../../../atoms/Tooltip'
@@ -22,7 +20,6 @@ export default function Dynamic({
   ddo: DDO
   content: any
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
   const { dtSymbol, dtName } = usePricing(ddo)
 
@@ -31,23 +28,17 @@ export default function Dynamic({
   const { price, weightOnDataToken } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
-  const correctNetwork = isCorrectNetwork(networkId)
-  const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
-    c.toUpperCase()
-  )
 
   // Check: account, network & insufficient balance
   useEffect(() => {
     if (!account) {
       setError(`No account connected. Please connect your Web3 wallet.`)
-    } else if (!correctNetwork) {
-      setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
     } else if (Number(balance.ocean) < Number(price)) {
       setError(`Insufficient balance. You need at least ${price} OCEAN`)
     } else {
       setError(undefined)
     }
-  }, [price, networkId, account, balance, correctNetwork, desiredNetworkName])
+  }, [price, networkId, account, balance])
 
   // refetch balance periodically
   useEffect(() => {

src/helpers/NetworkMonitor.tsx

@@ -1,47 +1,63 @@
 import React, { ReactElement, useEffect } from 'react'
 import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
-import appConfig from '../../app.config'
 import { Logger } from '@oceanprotocol/lib'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 
 export function NetworkMonitor(): ReactElement {
-  const { metadataCacheUri } = appConfig
-  const { connect, web3Provider } = useOcean()
+  const { connect, web3Provider, web3, networkId, config } = useOcean()
 
+  async function handleNetworkChanged(chainId: string | number) {
+    const initialNewConfig = getOceanConfig(
+      typeof chainId === 'string' ? Number(chainId.replace('0x', '')) : chainId
+    )
+
+    const newConfig = {
+      ...initialNewConfig,
+
+      // add local dev values
+      ...(chainId === '8996' && {
+        factoryAddress: '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f',
+        poolFactoryAddress: '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4',
+        fixedRateExchangeAddress: '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8',
+        metadataContractAddress: '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
+      })
+    }
+
+    try {
+      await connect(newConfig)
+    } catch (error) {
+      Logger.error(error.message)
+    }
+  }
+
+  // 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.
+  useEffect(() => {
+    if (!web3 || !networkId) return
+
+    async function init() {
+      if (
+        (await web3.eth.getChainId()) ===
+        (config as ConfigHelperConfig).networkId
+      )
+        return
+      await handleNetworkChanged(networkId)
+    }
+    init()
+  }, [web3, networkId])
+
+  // Handle network change events
   useEffect(() => {
     if (!web3Provider) return
 
-    async function handleNetworkChanged(chainId: string) {
-      const initialConfig = getOceanConfig(Number(chainId.replace('0x', '')))
-
-      const newConfig = {
-        ...initialConfig,
-        // add metadataCacheUri only when defined
-        ...(metadataCacheUri && { metadataCacheUri })
-      }
-      if (chainId === '8996') {
-        newConfig.factoryAddress = '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f'
-        newConfig.poolFactoryAddress =
-          '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4'
-        newConfig.fixedRateExchangeAddress =
-          '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8'
-        newConfig.metadataContractAddress =
-          '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
-      }
-
-      try {
-        await connect(newConfig)
-      } catch (error) {
-        Logger.error(error.message)
-      }
-    }
-
     web3Provider.on('chainChanged', handleNetworkChanged)
 
     return () => {
       web3Provider.removeListener('chainChanged', handleNetworkChanged)
     }
-  }, [web3Provider, connect, metadataCacheUri])
+  }, [web3Provider])
 
   return <></>
 }

src/helpers/wrapRootElement.tsx

@@ -24,17 +24,14 @@ export default function wrapRootElement({
 }: {
   element: ReactElement
 }): ReactElement {
-  const { metadataCacheUri, network } = appConfig
+  const { network } = appConfig
   const oceanInitialConfig = getOceanConfig(network)
 
-  const initialConfig = {
-    ...oceanInitialConfig,
-    // add metadataCacheUri only when defined
-    ...(metadataCacheUri && { metadataCacheUri })
-  }
-
   return (
-    <OceanProvider initialConfig={initialConfig} web3ModalOpts={web3ModalOpts}>
+    <OceanProvider
+      initialConfig={oceanInitialConfig}
+      web3ModalOpts={web3ModalOpts}
+    >
       <UserPreferencesProvider>
         <NetworkMonitor />
         {element}

src/utils/wallet.ts

@@ -50,7 +50,7 @@ export function getNetworkId(network: string): number {
   }
 }
 
-export function isCorrectNetwork(networkId: number): boolean {
+export function isDefaultNetwork(networkId: number): boolean {
   const configuredNetwork = getNetworkId(network)
   return configuredNetwork === networkId
 }