Development

src/@context/Automation/AutomationProvider.tsx

@@ -21,16 +21,11 @@ export enum AUTOMATION_MODES {
   ADVANCED = 'advanced'
 }
 
-export interface NativeTokenBalance {
-  symbol: string
-  balance: string
-}
 export interface AutomationProviderValue {
   autoWallet: Wallet
   autoWalletAddress: string
   isAutomationEnabled: boolean
   balance: UserBalance
-  nativeBalance: NativeTokenBalance
   isLoading: boolean
   decryptPercentage: number
   hasValidEncryptedWallet: boolean
@@ -65,8 +60,12 @@ function AutomationProvider({ children }) {
     address: autoWallet?.address as `0x${string}`
   })
 
-  const [nativeBalance, setNativeBalance] = useState<NativeTokenBalance>()
-  const [balance, setBalance] = useState<UserBalance>({})
+  const [balance, setBalance] = useState<UserBalance>({
+    native: {
+      symbol: 'eth',
+      balance: '0'
+    }
+  })
 
   const [hasDeleteRequest, setHasDeleteRequest] = useState(false)
 
@@ -98,16 +97,22 @@ function AutomationProvider({ children }) {
     if (!autoWallet) return
 
     try {
+      const newBalance: UserBalance = {
+        native: {
+          symbol: 'eth',
+          balance: '0'
+        }
+      }
       if (balanceNativeToken)
-        setNativeBalance({
-          symbol: balanceNativeToken?.symbol.toLowerCase() || 'ETH',
-          balance: balanceNativeToken?.formatted
-        })
+        newBalance.native.symbol =
+          balanceNativeToken?.symbol.toLowerCase() || 'eth'
+      newBalance.native.balance = balanceNativeToken?.formatted
 
       if (approvedBaseTokens?.length > 0) {
-        const newBalance = await getApprovedTokenBalances(autoWallet?.address)
-        setBalance(newBalance)
-      } else setBalance(undefined)
+        const approved = await getApprovedTokenBalances(autoWallet?.address)
+        newBalance.approved = approved
+      }
+      setBalance(newBalance)
     } catch (error) {
       LoggerInstance.error('[AutomationProvider] Error: ', error.message)
     }
@@ -207,7 +212,6 @@ function AutomationProvider({ children }) {
         autoWallet,
         autoWalletAddress,
         balance,
-        nativeBalance,
         isAutomationEnabled,
         isLoading,
         decryptPercentage,

src/@hooks/useBalance.tsx

@@ -11,7 +11,7 @@ import { getTokenBalance } from '@utils/wallet'
 
 interface BalanceProviderValue {
   balance: UserBalance
-  getApprovedTokenBalances: (address: string) => Promise<UserBalance>
+  getApprovedTokenBalances: (address: string) => Promise<TokenBalances>
 }
 
 function useBalance(): BalanceProviderValue {
@@ -22,12 +22,15 @@ function useBalance(): BalanceProviderValue {
   const { chain } = useNetwork()
 
   const [balance, setBalance] = useState<UserBalance>({
-    eth: '0'
+    native: {
+      symbol: 'eth',
+      balance: '0'
+    }
   })
 
   const getApprovedTokenBalances = useCallback(
-    async (address: string): Promise<UserBalance> => {
-      const newBalance: UserBalance = {}
+    async (address: string): Promise<TokenBalances> => {
+      const newBalance: TokenBalances = {}
 
       if (approvedBaseTokens?.length > 0) {
         await Promise.allSettled(
@@ -64,11 +67,13 @@ function useBalance(): BalanceProviderValue {
     try {
       const userBalance = balanceNativeToken?.formatted
       const key = balanceNativeToken?.symbol.toLowerCase()
-      const newNativeBalance: UserBalance = { [key]: userBalance }
 
-      const newBalance = {
-        ...newNativeBalance,
-        ...(await getApprovedTokenBalances(address))
+      const newBalance: UserBalance = {
+        native: {
+          symbol: key,
+          balance: userBalance
+        },
+        approved: await getApprovedTokenBalances(address)
       }
 
       setBalance(newBalance)

src/@types/TokenBalance.d.ts

@@ -1,3 +1,11 @@
 interface UserBalance {
+  native: {
+    symbol: string
+    balance: string
+  }
+  approved?: TokenBalances
+}
+
+interface TokenBalances {
   [key: string]: string
 }

src/@utils/subgraph.ts

@@ -58,6 +58,7 @@ const OpcsApprovedTokensQuery = gql`
 export const tokenAddressesEUROe = {
   100: '0xe974c4894996e012399dedbda0be7314a73bbff1',
   137: '0x820802Fa8a99901F52e39acD21177b0BE6EE2974',
+  32456: '0x8A4826071983655805bF4f29828577Cd6b1aC0cB',
   80001: '0xA089a21902914C3f3325dBE2334E9B466071E5f1'
 }
 
@@ -187,7 +188,8 @@ export async function getOpcsApprovedTokens(
           ...approvedTokens,
           {
             address: tokenAddressesEUROe[chainId],
-            decimals: 6,
+            // TODO: revert once decimals changed to 6 on pontus-x
+            decimals: chainId === 32456 ? 18 : 6,
             name: 'EUROe',
             symbol: 'EUROe'
           }

src/@utils/wallet/index.ts

@@ -176,12 +176,12 @@ export async function getTokenBalance(
   }
 }
 
-export function getTokenBalanceFromSymbol(
+export function getApprovedTokenBalanceFromSymbol(
   balance: UserBalance,
   symbol: string
 ): string {
   if (!symbol) return
-
-  const baseTokenBalance = balance?.[symbol.toLocaleLowerCase()]
+  const { approved } = balance
+  const baseTokenBalance = approved?.[symbol.toLocaleLowerCase()]
   return baseTokenBalance || '0'
 }

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

@@ -1,5 +1,5 @@
 import AssetTeaser from '@shared/AssetTeaser'
-import { ReactElement, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import Pagination from '@shared/Pagination'
 import styles from './index.module.css'
 import AssetTitle from '@shared/AssetListTitle'
@@ -10,8 +10,20 @@ import { getServiceByName } from '@utils/ddo'
 import AssetViewSelector, { AssetViewOptions } from './AssetViewSelector'
 import Time from '../atoms/Time'
 import Loader from '../atoms/Loader'
+import NetworkName from '../NetworkName'
+import { useUserPreferences } from '../../../@context/UserPreferences'
+import { ChainDoesNotSupportMulticallError } from 'wagmi'
 
-const columns: TableOceanColumn<AssetExtended>[] = [
+const networkColumn: TableOceanColumn<AssetExtended> = {
+  name: 'Network',
+  selector: (row) => {
+    const { chainId } = row
+    return <NetworkName networkId={chainId} />
+  },
+  maxWidth: '10rem'
+}
+
+const tableColumns: TableOceanColumn<AssetExtended>[] = [
   {
     name: 'Dataset',
     selector: (row) => {
@@ -96,6 +108,17 @@ export default function AssetList({
   showAssetViewSelector,
   defaultAssetView
 }: AssetListProps): ReactElement {
+  const { chainIds } = useUserPreferences()
+
+  const [columns, setColumns] = useState(tableColumns)
+
+  useEffect(() => {
+    if (chainIds.length > 1) {
+      const [datasetColumn, ...otherColumns] = tableColumns
+      setColumns([datasetColumn, networkColumn, ...otherColumns])
+    } else setColumns(tableColumns)
+  }, [chainIds])
+
   const [activeAssetView, setActiveAssetView] = useState<AssetViewOptions>(
     defaultAssetView || AssetViewOptions.Grid
   )

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

@@ -10,7 +10,7 @@ import { useAsset } from '@context/Asset'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset, ComputeEnvironment, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
-import { getTokenBalanceFromSymbol } from '@utils/wallet'
+import { getApprovedTokenBalanceFromSymbol } from '@utils/wallet'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import { useAccount } from 'wagmi'
@@ -273,7 +273,7 @@ export default function FormStartCompute({
     totalPrices.forEach((price) => {
       const balanceToUse = isAutomationEnabled ? automationBalance : balance
 
-      const baseTokenBalance = getTokenBalanceFromSymbol(
+      const baseTokenBalance = getApprovedTokenBalanceFromSymbol(
         balanceToUse,
         price.symbol
       )

src/components/Asset/AssetActions/index.tsx

@@ -11,7 +11,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import styles from './index.module.css'
 import { useFormikContext } from 'formik'
 import { FormPublishData } from '@components/Publish/_types'
-import { getTokenBalanceFromSymbol } from '@utils/wallet'
+import { getApprovedTokenBalanceFromSymbol } from '@utils/wallet'
 import AssetStats from './AssetStats'
 import { isAddressWhitelisted } from '@utils/ddo'
 import { useAccount, useProvider, useNetwork, useSigner } from 'wagmi'
@@ -154,7 +154,7 @@ export default function AssetActions({
 
     const balanceToUse = isAutomationEnabled ? automationBalance : balance
 
-    const baseTokenBalance = getTokenBalanceFromSymbol(
+    const baseTokenBalance = getApprovedTokenBalanceFromSymbol(
       balanceToUse,
       asset?.accessDetails?.baseToken?.symbol
     )

src/components/Header/UserPreferences/Automation/Balance.tsx

@@ -3,28 +3,28 @@ import { useAutomation } from '../../../../@context/Automation/AutomationProvide
 import styles from './Balance.module.css'
 
 export default function Balance(): ReactElement {
-  const { nativeBalance, balance } = useAutomation()
+  const { balance } = useAutomation()
 
   return (
     <>
       <div className={styles.wrapper}>
         <div className={styles.balance}>
           <ul>
-            {nativeBalance && (
-              <li key={`automation-balance-${nativeBalance.symbol}`}>
-                <span>{nativeBalance.symbol}</span>:{' '}
-                {Number(nativeBalance.balance).toFixed(4)}
+            {balance.native && (
+              <li key={`automation-balance-${balance.native.symbol}`}>
+                <span>{balance.native.symbol}</span>:{' '}
+                {Number(balance.native.balance).toFixed(4)}
               </li>
             )}
           </ul>
         </div>
         <div className={styles.balance}>
           <ul>
-            {balance &&
-              Object.keys(balance).map((currency) => (
+            {balance.approved &&
+              Object.keys(balance.approved).map((currency) => (
                 <li key={`automation-balance-${currency}`}>
                   <span>{currency}</span>:{' '}
-                  {Number(balance[currency]).toFixed(4)}
+                  {Number(balance.approved[currency]).toFixed(4)}
                 </li>
               ))}
           </ul>

src/components/Header/UserPreferences/Automation/Details.tsx

@@ -64,8 +64,8 @@ export default function Details({
   const {
     autoWallet,
     autoWalletAddress,
+    balance,
     isAutomationEnabled,
-    nativeBalance,
     isLoading,
     hasValidEncryptedWallet,
     setIsAutomationEnabled
@@ -84,11 +84,11 @@ export default function Details({
   }, [hasValidEncryptedWallet])
 
   useEffect(() => {
-    if (!automationConfig.roughTxGasEstimate || !nativeBalance?.balance) return
+    if (!automationConfig.roughTxGasEstimate) return
     setRoughTxCountEstimate(
-      Number(nativeBalance.balance) / automationConfig.roughTxGasEstimate
+      Number(balance.native.balance) / automationConfig.roughTxGasEstimate
     )
-  }, [nativeBalance?.balance, automationConfig?.roughTxGasEstimate])
+  }, [balance.native, automationConfig?.roughTxGasEstimate])
 
   return (
     <div className={styles.details}>

src/components/Header/UserPreferences/Automation/index.tsx

@@ -12,27 +12,23 @@ import styles from './index.module.css'
 const cx = classNames.bind(styles)
 
 export default function Automation(): ReactElement {
-  const {
-    autoWallet,
-    isAutomationEnabled,
-    hasValidEncryptedWallet,
-    balance,
-    nativeBalance
-  } = useAutomation()
+  const { autoWallet, isAutomationEnabled, hasValidEncryptedWallet, balance } =
+    useAutomation()
 
   const [hasZeroNetworkTokenBalance, setHasZeroNetworkTokenBalance] =
     useState<boolean>(false)
   const [hasZeroERC20TokenBalances, setHasZeroERC20TokenBalances] =
     useState<boolean>(false)
 
   useEffect(() => {
-    balance &&
+    balance.approved &&
       setHasZeroERC20TokenBalances(
-        Object.keys(balance)?.filter((token) => Number(balance[token]) <= 0)
-          .length > 0
+        Object.keys(balance.approved)?.filter(
+          (token) => Number(balance.approved[token]) <= 0
+        ).length > 0
       )
-    setHasZeroNetworkTokenBalance(Number(nativeBalance?.balance) <= 0)
-  }, [balance, nativeBalance])
+    setHasZeroNetworkTokenBalance(Number(balance.native.balance) <= 0)
+  }, [balance])
 
   const wrapperClasses = cx({
     automation: true,