fallback providers, more config

app.config.js

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

src/@context/MarketMetadata/_types.ts

@@ -7,7 +7,6 @@ export interface OpcFee {
 
 export interface AppConfig {
   metadataCacheUri: string
-  infuraProjectId: string
   chainIds: number[]
   chainIdsSupported: number[]
   defaultDatatokenTemplateIndex: number

src/@utils/fixedRateExchange.ts

@@ -2,7 +2,6 @@ import { FixedRateExchange, PriceAndFees } from '@oceanprotocol/lib'
 import { consumeMarketFixedSwapFee } from '../../app.config'
 import Web3 from 'web3'
 import { getOceanConfig } from './ocean'
-import { getDummyWeb3 } from './web3'
 
 /**
  * This is used to calculate the price to buy one datatoken from a fixed rate exchange. You need to pass either a web3 object or a chainId. If you pass a chainId a dummy web3 object will be created
@@ -19,10 +18,6 @@ export async function getFixedBuyPrice(
   if (!web3 && !chainId)
     throw new Error("web3 and chainId can't be undefined at the same time!")
 
-  if (!web3) {
-    web3 = await getDummyWeb3(chainId)
-  }
-
   const config = getOceanConfig(chainId)
 
   const fixed = new FixedRateExchange(config.fixedRateExchangeAddress, web3)

src/@utils/web3.ts

@@ -6,19 +6,23 @@ import {
   modalConnectors,
   walletConnectProvider
 } from '@web3modal/ethereum'
-
 import { configureChains, createClient, erc20ABI } from 'wagmi'
 import { mainnet, polygon, bsc, goerli, polygonMumbai } from 'wagmi/chains'
+import { publicProvider } from 'wagmi/providers/public'
+import { infuraProvider } from 'wagmi/providers/infura'
 import { ethers, utils } from 'ethers'
 
-export const chains = [mainnet, polygon, bsc, goerli, polygonMumbai]
-
 // Wagmi client
-export const { provider } = configureChains(chains, [
+export const { chains, provider } = configureChains(
+  [mainnet, polygon, bsc, goerli, polygonMumbai],
+  [
     walletConnectProvider({
       projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
-  })
+    }),
-])
+    infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID }),
+    publicProvider()
+  ]
+)
 
 export const wagmiClient = createClient({
   autoConnect: true,
@@ -35,15 +39,6 @@ export function accountTruncate(account: string): string {
   const truncated = account.replace(middle, '…')
   return truncated
 }
-/**
- * returns a dummy web3 instance, only usable to get info from the chain
- * @param chainId
- * @returns Web3 instance
- */
-// export async function getDummyWeb3(chainId: number): Promise<Web3> {
-//   const config = getOceanConfig(chainId)
-//   return new Web3(config.nodeUri)
-// }
 
 export async function addCustomNetwork(
   web3Provider: any,
@@ -141,10 +136,10 @@ export async function getTokenBalance(
   accountId: string,
   decimals: number,
   tokenAddress: string,
-  provider: any
+  web3Provider: any
 ): Promise<string> {
   try {
-    const token = new ethers.Contract(tokenAddress, erc20ABI, provider)
+    const token = new ethers.Contract(tokenAddress, erc20ABI, web3Provider)
     const balance = await token.methods.balanceOf(accountId).call()
     const adjustedDecimalsBalance = `${balance}${'0'.repeat(18 - decimals)}`
     return utils.formatEther(adjustedDecimalsBalance)

src/components/Asset/AssetActions/Compute/index.tsx

@@ -43,7 +43,6 @@ import { useAbortController } from '@hooks/useAbortController'
 import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
 import { handleComputeOrder } from '@utils/order'
 import { getComputeFeedback } from '@utils/feedback'
-import { getDummyWeb3 } from '@utils/web3'
 import { initializeProviderForCompute } from '@utils/provider'
 import { useUserPreferences } from '@context/UserPreferences'
 import { useAsset } from '@context/Asset'
@@ -117,7 +116,6 @@ export default function Compute({
 
   async function checkAssetDTBalance(asset: DDO): Promise<boolean> {
     if (!asset?.services[0].datatokenAddress) return
-    const web3 = await getDummyWeb3(asset?.chainId)
     const datatokenInstance = new Datatoken(web3)
     const dtBalance = await datatokenInstance.balance(
       asset?.services[0].datatokenAddress,
@@ -153,21 +151,14 @@ export default function Compute({
       setInitializedProviderResponse(initializedProvider)
 
       const feeAmount = await unitsToAmount(
-        !isSupportedOceanNetwork || !isAssetNetwork
+        web3,
-          ? await getDummyWeb3(asset?.chainId)
-          : web3,
         initializedProvider?.datasets?.[0]?.providerFee?.providerFeeToken,
         initializedProvider?.datasets?.[0]?.providerFee?.providerFeeAmount
       )
 
       setProviderFeeAmount(feeAmount)
 
-      const datatoken = new Datatoken(
+      const datatoken = new Datatoken(web3, null, null, minAbi)
-        await getDummyWeb3(asset?.chainId),
-        null,
-        null,
-        minAbi
-      )
       setProviderFeesSymbol(
         await datatoken.getSymbol(
           initializedProvider?.datasets?.[0]?.providerFee?.providerFeeToken

src/components/Asset/AssetContent/MetaFull.tsx

@@ -3,7 +3,6 @@ import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import Publisher from '@shared/Publisher'
 import { useAsset } from '@context/Asset'
-import { getDummyWeb3 } from '@utils/web3'
 import { Asset, Datatoken, LoggerInstance } from '@oceanprotocol/lib'
 
 export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
@@ -14,7 +13,6 @@ export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
     async function getInitialPaymentCollector() {
       try {
         if (!ddo) return
-        const web3 = await getDummyWeb3(ddo.chainId)
         const datatoken = new Datatoken(web3)
         setPaymentCollector(
           await datatoken.getPaymentCollector(ddo.datatokens[0].address)

src/pages/_app.tsx

@@ -40,6 +40,8 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
       <Web3Modal
         projectId={process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID}
         ethereumClient={ethereumClient}
+        themeColor="blackWhite"
+        themeBackground="themeColor"
       />
     </>
   )