Added op mainnet into the Ocean market (#2007)

* Bump to ocean.js 3.2.0

* Added optimism network

* Added optimism network

* Enabled optimism network by default

app.config.js

@@ -11,10 +11,10 @@ module.exports = {
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: [1, 137],
+  chainIds: [1, 137, 10],
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: [1, 137, 5, 80001, 11155111],
+  chainIdsSupported: [1, 137, 10, 5, 80001, 11155111],
 
   customProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL,
 

package.json

@@ -30,7 +30,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^3.1.3",
+    "@oceanprotocol/lib": "^3.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@oceanprotocol/use-dark-mode": "^2.4.3",
     "@orbisclub/orbis-sdk": "^0.4.40",

src/@hooks/useNetworkMetadata/utils.ts

@@ -28,6 +28,9 @@ export function getNetworkDisplayName(data: EthereumListsChain): string {
     case 137:
       displayName = 'Polygon'
       break
+    case 10:
+      displayName = 'OP Mainnet'
+      break
     case 1285:
       displayName = 'Moonriver'
       break

src/@utils/wallet/index.ts

@@ -1,7 +1,14 @@
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { createClient, erc20ABI } from 'wagmi'
-import { mainnet, polygon, goerli, polygonMumbai, sepolia } from 'wagmi/chains'
-import { ethers, Contract, Signer, providers } from 'ethers'
+import {
+  mainnet,
+  polygon,
+  optimism,
+  goerli,
+  polygonMumbai,
+  sepolia
+} from 'wagmi/chains'
+import { ethers, Contract, Signer } from 'ethers'
 import { formatEther } from 'ethers/lib/utils'
 import { getDefaultClient } from 'connectkit'
 import { getNetworkDisplayName } from '@hooks/useNetworkMetadata'
@@ -30,7 +37,7 @@ export const wagmiClient = createClient(
     appName: 'Ocean Market',
     infuraId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID,
     // TODO: mapping between appConfig.chainIdsSupported and wagmi chainId
-    chains: [mainnet, polygon, goerli, polygonMumbai, sepolia],
+    chains: [mainnet, polygon, optimism, goerli, polygonMumbai, sepolia],
     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
   })
 )

src/components/@shared/NetworkName/NetworkIcon.tsx

@@ -4,6 +4,7 @@ import PolygonIcon from '@images/polygon.svg'
 import MoonbeamIcon from '@images/moonbeam.svg'
 import BscIcon from '@images/bsc.svg'
 import EnergywebIcon from '@images/energyweb.svg'
+import OptimismIcon from '@images/optimism.svg'
 import styles from './index.module.css'
 
 export function NetworkIcon({ name }: { name: string }): ReactElement {
@@ -17,6 +18,8 @@ export function NetworkIcon({ name }: { name: string }): ReactElement {
     ? BscIcon
     : name.includes('Energy Web')
     ? EnergywebIcon
+    : name.includes('OP Mainnet')
+    ? OptimismIcon
     : EthIcon // ETH icon as fallback
 
   return <IconMapped className={styles.icon} />