diff --git a/src/@context/Automation/AutomationProvider.tsx b/src/@context/Automation/AutomationProvider.tsx index f75f6702..db4fb3c3 100644 --- a/src/@context/Automation/AutomationProvider.tsx +++ b/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() - const [balance, setBalance] = useState({}) + const [balance, setBalance] = useState({ + 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, diff --git a/src/@hooks/useBalance.tsx b/src/@hooks/useBalance.tsx index 2eacb2f3..9462ae76 100644 --- a/src/@hooks/useBalance.tsx +++ b/src/@hooks/useBalance.tsx @@ -11,7 +11,7 @@ import { getTokenBalance } from '@utils/wallet' interface BalanceProviderValue { balance: UserBalance - getApprovedTokenBalances: (address: string) => Promise + getApprovedTokenBalances: (address: string) => Promise } function useBalance(): BalanceProviderValue { @@ -22,12 +22,15 @@ function useBalance(): BalanceProviderValue { const { chain } = useNetwork() const [balance, setBalance] = useState({ - eth: '0' + native: { + symbol: 'eth', + balance: '0' + } }) const getApprovedTokenBalances = useCallback( - async (address: string): Promise => { - const newBalance: UserBalance = {} + async (address: string): Promise => { + 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) diff --git a/src/@types/TokenBalance.d.ts b/src/@types/TokenBalance.d.ts index d51e735d..bd117f8c 100644 --- a/src/@types/TokenBalance.d.ts +++ b/src/@types/TokenBalance.d.ts @@ -1,3 +1,11 @@ interface UserBalance { + native: { + symbol: string + balance: string + } + approved?: TokenBalances +} + +interface TokenBalances { [key: string]: string } diff --git a/src/@utils/subgraph.ts b/src/@utils/subgraph.ts index 3cc58875..613e31e9 100644 --- a/src/@utils/subgraph.ts +++ b/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' } diff --git a/src/@utils/wallet/index.ts b/src/@utils/wallet/index.ts index b37f4187..9121e1af 100644 --- a/src/@utils/wallet/index.ts +++ b/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' } diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx index 736bc21e..4fcaf31c 100644 --- a/src/components/@shared/AssetList/index.tsx +++ b/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[] = [ +const networkColumn: TableOceanColumn = { + name: 'Network', + selector: (row) => { + const { chainId } = row + return + }, + maxWidth: '10rem' +} + +const tableColumns: TableOceanColumn[] = [ { 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( defaultAssetView || AssetViewOptions.Grid ) diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx index 49aae0c7..2b79c543 100644 --- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx +++ b/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 ) diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx index f05cc638..e62e3f82 100644 --- a/src/components/Asset/AssetActions/index.tsx +++ b/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 ) diff --git a/src/components/Header/UserPreferences/Automation/Balance.tsx b/src/components/Header/UserPreferences/Automation/Balance.tsx index 7146592a..9df1fe1b 100644 --- a/src/components/Header/UserPreferences/Automation/Balance.tsx +++ b/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 ( <>
    - {nativeBalance && ( -
  • - {nativeBalance.symbol}:{' '} - {Number(nativeBalance.balance).toFixed(4)} + {balance.native && ( +
  • + {balance.native.symbol}:{' '} + {Number(balance.native.balance).toFixed(4)}
    • )}
    - {balance && - Object.keys(balance).map((currency) => ( + {balance.approved && + Object.keys(balance.approved).map((currency) => (
  • {currency}:{' '} - {Number(balance[currency]).toFixed(4)} + {Number(balance.approved[currency]).toFixed(4)}
    • ))}
diff --git a/src/components/Header/UserPreferences/Automation/Details.tsx b/src/components/Header/UserPreferences/Automation/Details.tsx index 86146bd2..52e0b419 100644 --- a/src/components/Header/UserPreferences/Automation/Details.tsx +++ b/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 (
diff --git a/src/components/Header/UserPreferences/Automation/index.tsx b/src/components/Header/UserPreferences/Automation/index.tsx index f5f2b94e..44ca5c52 100644 --- a/src/components/Header/UserPreferences/Automation/index.tsx +++ b/src/components/Header/UserPreferences/Automation/index.tsx @@ -12,13 +12,8 @@ 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(false) @@ -26,13 +21,14 @@ export default function Automation(): ReactElement { useState(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,