graph sync fix, remove custom network switching code

src/@context/Web3Legacy.tsx

@@ -32,15 +32,15 @@ function Web3LegacyProvider({
   const [web3Loading, setWeb3Loading] = useState<boolean>(true)
 
   useEffect(() => {
-    const init = async () => {
-      if (!web3Provider || !address || !chain?.id) return
+    if (!web3Provider || !address || !chain?.id) return
 
+    const init = async () => {
       try {
         setWeb3Loading(true)
         const web3 = new Web3(web3Provider as any)
         setWeb3(web3)
       } catch (error) {
-        LoggerInstance.error(error.message)
+        LoggerInstance.error(`[Web3Legacy] ${error.message}`)
       } finally {
         setWeb3Loading(false)
       }

src/@hooks/useGraphSyncStatus.ts

@@ -52,7 +52,7 @@ export function useGraphSyncStatus(networkId: number): UseGraphSyncStatus {
 
   // Log head block
   useEffect(() => {
-    if (blockHead) return
+    if (!blockHead) return
     LoggerInstance.log('[GraphStatus] Head block: ', blockHead)
   }, [blockHead])
 

src/@utils/wallet.ts

@@ -1,6 +1,4 @@
-import { getNetworkDisplayName } from '@hooks/useNetworkMetadata'
 import { LoggerInstance } from '@oceanprotocol/lib'
-import { getOceanConfig } from './ocean'
 import {
   EthereumClient,
   modalConnectors,
@@ -40,60 +38,6 @@ export function accountTruncate(account: string): string {
   return truncated
 }
 
-export async function addCustomNetwork(
-  network: EthereumListsChain
-): Promise<void> {
-  // Always add explorer URL from ocean.js first, as it's null sometimes
-  // in network data
-  const blockExplorerUrls = [
-    getOceanConfig(network.networkId).explorerUri,
-    network.explorers && network.explorers[0].url
-  ]
-
-  const newNetworkData = {
-    chainId: `0x${network.chainId.toString(16)}`,
-    chainName: getNetworkDisplayName(network),
-    nativeCurrency: network.nativeCurrency,
-    rpcUrls: network.rpc,
-    blockExplorerUrls
-  }
-  try {
-    await window?.ethereum.request({
-      method: 'wallet_switchEthereumChain',
-      params: [{ chainId: newNetworkData.chainId }]
-    })
-  } catch (switchError) {
-    if (switchError.code === 4902) {
-      await (window?.ethereum.request as any)(
-        {
-          method: 'wallet_addEthereumChain',
-          params: [newNetworkData]
-        },
-        (err: string, added: any) => {
-          if (err || 'error' in added) {
-            LoggerInstance.error(
-              `Couldn't add ${network.name} (0x${
-                network.chainId
-              }) network to MetaMask, error: ${err || added.error}`
-            )
-          } else {
-            LoggerInstance.log(
-              `Added ${network.name} (0x${network.chainId}) network to MetaMask`
-            )
-          }
-        }
-      )
-    } else {
-      LoggerInstance.error(
-        `Couldn't add ${network.name} (0x${network.chainId}) network to MetaMask, error: ${switchError}`
-      )
-    }
-  }
-  LoggerInstance.log(
-    `Added ${network.name} (0x${network.chainId}) network to MetaMask`
-  )
-}
-
 export async function addTokenToWallet(
   address: string,
   symbol: string,
@@ -136,6 +80,8 @@ export async function getTokenBalance(
   tokenAddress: string,
   web3Provider: ethers.providers.Provider
 ): Promise<string> {
+  if (!web3Provider) return
+
   try {
     const token = new ethers.Contract(tokenAddress, erc20ABI, web3Provider)
     const balance = await token.balanceOf(accountId)
@@ -151,6 +97,7 @@ export function getTokenBalanceFromSymbol(
   symbol: string
 ): string {
   if (!symbol) return
+
   const baseTokenBalance = balance?.[symbol.toLocaleLowerCase()]
   return baseTokenBalance || '0'
 }

src/components/@shared/WalletNetworkSwitcher/index.tsx

@@ -1,17 +1,17 @@
 import React, { ReactElement } from 'react'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
-import { addCustomNetwork } from '@utils/wallet'
 import useNetworkMetadata, {
   getNetworkDataById,
   getNetworkDisplayName
 } from '@hooks/useNetworkMetadata'
 import { useAsset } from '@context/Asset'
-import { useNetwork } from 'wagmi'
+import { useNetwork, useSwitchNetwork } from 'wagmi'
 
 export default function WalletNetworkSwitcher(): ReactElement {
   const { chain } = useNetwork()
   const { asset } = useAsset()
+  const { switchNetwork } = useSwitchNetwork({ chainId: asset?.chainId })
   const { networksList } = useNetworkMetadata()
 
   const ddoNetworkData = getNetworkDataById(networksList, asset.chainId)
@@ -24,13 +24,6 @@ export default function WalletNetworkSwitcher(): ReactElement {
     <strong>{getNetworkDisplayName(walletNetworkData)}</strong>
   )
 
-  async function switchWalletNetwork() {
-    const networkNode = await networksList.find(
-      (data) => data.chainId === asset.chainId
-    )
-    addCustomNetwork(networkNode)
-  }
-
   return (
     <>
       <p className={styles.text}>
@@ -38,7 +31,7 @@ export default function WalletNetworkSwitcher(): ReactElement {
         to {walletNetworkName}. Connect to {ddoNetworkName} to interact with
         this asset.
       </p>
-      <Button size="small" onClick={() => switchWalletNetwork()}>
+      <Button size="small" onClick={() => switchNetwork()}>
         Switch to {ddoNetworkName}
       </Button>
     </>

src/components/Asset/AssetContent/MetaFull.tsx

@@ -7,7 +7,9 @@ import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
 import { useWeb3Legacy } from '@context/Web3Legacy'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
+  const { isInPurgatory } = useAsset()
   const { web3 } = useWeb3Legacy()
+
   const [paymentCollector, setPaymentCollector] = useState<string>()
   const { isInPurgatory, assetState } = useAsset()
 
@@ -21,7 +23,10 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
           await datatoken.getPaymentCollector(ddo.datatokens[0].address)
         )
       } catch (error) {
-        LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error)
+        LoggerInstance.error(
+          '[MetaFull: getInitialPaymentCollector]',
+          error.message
+        )
       }
     }
     getInitialPaymentCollector()