diff --git a/src/@hooks/useNftFactory.ts b/src/@hooks/useNftFactory.ts index 30055e888..660332c2b 100644 --- a/src/@hooks/useNftFactory.ts +++ b/src/@hooks/useNftFactory.ts @@ -1,18 +1,19 @@ import { useEffect, useState } from 'react' import { NftFactory } from '@oceanprotocol/lib' -import { useWeb3 } from '@hooks/useBalance' import { getOceanConfig } from '@utils/ocean' +import { useNetwork } from 'wagmi' function useNftFactory(): NftFactory { - const { web3, chainId } = useWeb3() + const { chain } = useNetwork() const [nftFactory, setNftFactory] = useState() useEffect(() => { - if (!web3 || !chainId) return - const config = getOceanConfig(chainId) + if (!web3 || !chain?.id) return + + const config = getOceanConfig(chain.id) const factory = new NftFactory(config?.nftFactoryAddress, web3) setNftFactory(factory) - }, [web3, chainId]) + }, [web3, chain?.id]) return nftFactory } diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts index a4343801d..e6a883cd5 100644 --- a/src/@utils/nft.ts +++ b/src/@utils/nft.ts @@ -67,7 +67,7 @@ export function generateNftCreateData( nftMetadata: NftMetadata, accountId: string, transferable = true -): any { +): NftCreateData { const nftCreateData: NftCreateData = { name: nftMetadata.name, symbol: nftMetadata.symbol, diff --git a/src/components/Asset/AssetActions/ButtonBuy/index.tsx b/src/components/Asset/AssetActions/ButtonBuy/index.tsx index 6e65df2fb..e1154ca44 100644 --- a/src/components/Asset/AssetActions/ButtonBuy/index.tsx +++ b/src/components/Asset/AssetActions/ButtonBuy/index.tsx @@ -2,8 +2,6 @@ import React, { FormEvent, ReactElement } from 'react' import Button from '../../../@shared/atoms/Button' import styles from './index.module.css' import Loader from '../../../@shared/atoms/Loader' -import { useWeb3 } from '@hooks/useBalance' -import Web3 from 'web3' export interface ButtonBuyProps { action: 'download' | 'compute' @@ -185,7 +183,6 @@ export default function ButtonBuy({ retry, isSupportedOceanNetwork }: ButtonBuyProps): ReactElement { - const { web3 } = useWeb3() const buttonText = retry ? 'Retry' : action === 'download' diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx index 40792b021..dfcdc17d4 100644 --- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx +++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx @@ -7,7 +7,6 @@ import { compareAsBN } from '@utils/numbers' import ButtonBuy from '../ButtonBuy' import PriceOutput from './PriceOutput' import { useAsset } from '@context/Asset' -import { useWeb3 } from '@hooks/useBalance' import content from '../../../../../content/pages/startComputeDataset.json' import { Asset, ZERO_ADDRESS } from '@oceanprotocol/lib' import { getAccessDetails } from '@utils/accessDetailsAndPricing' @@ -16,6 +15,9 @@ import Alert from '@shared/atoms/Alert' import { getTokenBalanceFromSymbol } from '@utils/web3' import { MAX_DECIMALS } from '@utils/constants' import Decimal from 'decimal.js' +import { useAccount } from 'wagmi' +import useBalance from '@hooks/useBalance' +import useNetworkMetadata from '@hooks/useNetworkMetadata' export default function FormStartCompute({ algorithms, @@ -77,7 +79,9 @@ export default function FormStartCompute({ retry: boolean }): ReactElement { const { siteContent } = useMarketMetadata() - const { accountId, balance, isSupportedOceanNetwork } = useWeb3() + const { address: accountId } = useAccount() + const { balance } = useBalance() + const { isSupportedOceanNetwork } = useNetworkMetadata() const { isValid, values }: FormikContextType<{ algorithm: string }> = useFormikContext() const { asset, isAssetNetwork } = useAsset() diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx index b0e8daef5..d6e152a83 100644 --- a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx +++ b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx @@ -5,7 +5,7 @@ import Tooltip from '@shared/atoms/Tooltip' import styles from './PriceOutput.module.css' import { MAX_DECIMALS } from '@utils/constants' import Decimal from 'decimal.js' -import { useWeb3 } from '@hooks/useBalance' +import useNetworkMetadata from '@hooks/useNetworkMetadata' interface PriceOutputProps { hasPreviousOrder: boolean @@ -42,7 +42,7 @@ function Row({ sign?: string type?: string }) { - const { isSupportedOceanNetwork } = useWeb3() + const { isSupportedOceanNetwork } = useNetworkMetadata() return (
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx index 02463ba96..19b1c8fbd 100644 --- a/src/components/Asset/AssetActions/Compute/index.tsx +++ b/src/components/Asset/AssetActions/Compute/index.tsx @@ -19,7 +19,6 @@ import { toast } from 'react-toastify' import Price from '@shared/Price' import FileIcon from '@shared/FileIcon' import Alert from '@shared/atoms/Alert' -import { useWeb3 } from '@hooks/useBalance' import { Formik } from 'formik' import { getInitialValues, validationSchema } from './_constants' import FormStartComputeDataset from './FormComputeDataset' @@ -46,8 +45,10 @@ import { getComputeFeedback } from '@utils/feedback' import { initializeProviderForCompute } from '@utils/provider' import { useUserPreferences } from '@context/UserPreferences' import { useAsset } from '@context/Asset' +import { useAccount } from 'wagmi' const refreshInterval = 10000 // 10 sec. + export default function Compute({ asset, dtBalance, @@ -61,7 +62,7 @@ export default function Compute({ fileIsLoading?: boolean consumableFeedback?: string }): ReactElement { - const { accountId, web3, isSupportedOceanNetwork, networkId } = useWeb3() + const { address: accountId } = useAccount() const { chainIds } = useUserPreferences() const { isAssetNetwork } = useAsset() diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download.tsx index b438873a4..9bba05bbf 100644 --- a/src/components/Asset/AssetActions/Download.tsx +++ b/src/components/Asset/AssetActions/Download.tsx @@ -2,7 +2,6 @@ import React, { ReactElement, useEffect, useState } from 'react' import FileIcon from '@shared/FileIcon' import Price from '@shared/Price' import { useAsset } from '@context/Asset' -import { useWeb3 } from '@hooks/useBalance' import ButtonBuy from './ButtonBuy' import { secondsToString } from '@utils/ddo' import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute' @@ -17,6 +16,8 @@ import { useIsMounted } from '@hooks/useIsMounted' import { useMarketMetadata } from '@context/MarketMetadata' import Alert from '@shared/atoms/Alert' import Loader from '@shared/atoms/Loader' +import { useAccount } from 'wagmi' +import useNetworkMetadata from '@hooks/useNetworkMetadata' export default function Download({ asset, @@ -33,7 +34,8 @@ export default function Download({ fileIsLoading?: boolean consumableFeedback?: string }): ReactElement { - const { accountId, web3, isSupportedOceanNetwork } = useWeb3() + const { address: accountId } = useAccount() + const { isSupportedOceanNetwork } = useNetworkMetadata() const { getOpcFeeForToken } = useMarketMetadata() const { isInPurgatory, isAssetNetwork } = useAsset() const isMounted = useIsMounted() diff --git a/src/components/Asset/Edit/EditComputeDataset.tsx b/src/components/Asset/Edit/EditComputeDataset.tsx index 902a0e33d..7a4ecc0dd 100644 --- a/src/components/Asset/Edit/EditComputeDataset.tsx +++ b/src/components/Asset/Edit/EditComputeDataset.tsx @@ -1,4 +1,3 @@ -import { useWeb3 } from '@hooks/useBalance' import { Formik } from 'formik' import React, { ReactElement, useState } from 'react' import FormEditComputeDataset from './FormEditComputeDataset' @@ -24,6 +23,7 @@ import { useAsset } from '@context/Asset' import EditFeedback from './EditFeedback' import { setNftMetadata } from '@utils/nft' import { ComputeEditForm } from './_types' +import { useAccount } from 'wagmi' export default function EditComputeDataset({ asset @@ -31,7 +31,7 @@ export default function EditComputeDataset({ asset: AssetExtended }): ReactElement { const { debug } = useUserPreferences() - const { accountId, web3 } = useWeb3() + const { address: accountId } = useAccount() const { fetchAsset, isAssetNetwork } = useAsset() const [success, setSuccess] = useState() const [error, setError] = useState() diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx index 374f0ecc0..f1cf3f535 100644 --- a/src/components/Asset/Edit/EditMetadata.tsx +++ b/src/components/Asset/Edit/EditMetadata.tsx @@ -12,7 +12,6 @@ import { import { validationSchema } from './_validation' import { getInitialValues } from './_constants' import { MetadataEditForm } from './_types' -import { useWeb3 } from '@hooks/useBalance' import { useUserPreferences } from '@context/UserPreferences' import Web3Feedback from '@shared/Web3Feedback' import FormEditMetadata from './FormEditMetadata' @@ -28,6 +27,7 @@ import { setNftMetadata } from '@utils/nft' import { sanitizeUrl } from '@utils/url' import { getEncryptedFiles } from '@utils/provider' import { assetStateToNumber } from '@utils/assetState' +import { useAccount } from 'wagmi' export default function Edit({ asset @@ -36,7 +36,7 @@ export default function Edit({ }): ReactElement { const { debug } = useUserPreferences() const { fetchAsset, isAssetNetwork, assetState } = useAsset() - const { accountId, web3 } = useWeb3() + const { address: accountId } = useAccount() const newAbortController = useAbortController() const [success, setSuccess] = useState() const [paymentCollector, setPaymentCollector] = useState() diff --git a/src/components/Profile/History/ComputeJobs/Results.tsx b/src/components/Profile/History/ComputeJobs/Results.tsx index e20c3e899..d7c4d42be 100644 --- a/src/components/Profile/History/ComputeJobs/Results.tsx +++ b/src/components/Profile/History/ComputeJobs/Results.tsx @@ -10,9 +10,9 @@ import Button from '@shared/atoms/Button' import styles from './Results.module.css' import FormHelp from '@shared/FormInput/Help' import content from '../../../../../content/pages/history.json' -import { useWeb3 } from '@hooks/useBalance' import { useCancelToken } from '@hooks/useCancelToken' import { getAsset } from '@utils/aquarius' +import { useAccount } from 'wagmi' export default function Results({ job @@ -20,7 +20,7 @@ export default function Results({ job: ComputeJobMetaData }): ReactElement { const providerInstance = new Provider() - const { accountId, web3 } = useWeb3() + const { address: accountId } = useAccount() const isFinished = job.dateFinished !== null const [datasetProvider, setDatasetProvider] = useState() diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts index 4f8a40b46..45568c0a7 100644 --- a/src/components/Publish/_utils.ts +++ b/src/components/Publish/_utils.ts @@ -17,7 +17,6 @@ import { mapTimeoutStringToSeconds } from '@utils/ddo' import { generateNftCreateData } from '@utils/nft' import { getEncryptedFiles } from '@utils/provider' import slugify from 'slugify' -import Web3 from 'web3' import { algorithmContainerPresets } from './_constants' import { FormPublishData, MetadataAlgorithmContainer } from './_types' import { @@ -28,6 +27,7 @@ import { } from '../../../app.config' import { sanitizeUrl } from '@utils/url' import { getContainerChecksum } from '@utils/docker' +import { utils } from 'ethers' function getUrlFileExtension(fileUrl: string): string { const splittedFileUrl = fileUrl.split('.') @@ -206,8 +206,7 @@ export async function createTokensAndPricing( values: FormPublishData, accountId: string, config: Config, - nftFactory: NftFactory, - web3: Web3 + nftFactory: NftFactory ) { const nftCreateData: NftCreateData = generateNftCreateData( values.metadata.nft, @@ -274,8 +273,8 @@ export async function createTokensAndPricing( // both will be just 1 for the market const dispenserParams: DispenserCreationParams = { dispenserAddress: config.dispenserAddress, - maxTokens: web3.utils.toWei('1'), - maxBalance: web3.utils.toWei('1'), + maxTokens: utils.parseEther('1').toString(), + maxBalance: utils.parseEther('1').toString(), withMint: true, allowedSwapper: ZERO_ADDRESS } diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index 659235d81..92bc98021 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -2,7 +2,6 @@ import React, { ReactElement, useState, useRef } from 'react' import { Form, Formik } from 'formik' import { initialPublishFeedback, initialValues } from './_constants' import { useAccountPurgatory } from '@hooks/useAccountPurgatory' -import { useWeb3 } from '@hooks/useBalance' import { createTokensAndPricing, transformPublishFormToDdo } from './_utils' import PageHeader from '@shared/Page/PageHeader' import Title from './Title' @@ -19,6 +18,7 @@ import { getOceanConfig } from '@utils/ocean' import { validationSchema } from './_validation' import { useAbortController } from '@hooks/useAbortController' import { setNFTMetadataAndTokenURI } from '@utils/nft' +import { useAccount, useNetwork } from 'wagmi' export default function PublishPage({ content @@ -26,7 +26,8 @@ export default function PublishPage({ content: { title: string; description: string; warning: string } }): ReactElement { const { debug } = useUserPreferences() - const { accountId, web3, chainId } = useWeb3() + const { address: accountId } = useAccount() + const { chain } = useNetwork() const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) const scrollToRef = useRef() const nftFactory = useNftFactory() @@ -60,17 +61,11 @@ export default function PublishPage({ })) try { - const config = getOceanConfig(chainId) + const config = getOceanConfig(chain?.id) LoggerInstance.log('[publish] using config: ', config) const { erc721Address, datatokenAddress, txHash } = - await createTokensAndPricing( - values, - accountId, - config, - nftFactory, - web3 - ) + await createTokensAndPricing(values, accountId, config, nftFactory) const isSuccess = Boolean(erc721Address && datatokenAddress && txHash) if (!isSuccess) throw new Error('No Token created. Please try again.') diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index d173d3f99..679ef8e19 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -15,6 +15,7 @@ export default function PageProfile(): ReactElement { const [finalAccountId, setFinalAccountId] = useState() const [finalAccountEns, setFinalAccountEns] = useState() const [ownAccount, setOwnAccount] = useState(false) + // Have accountId in path take over, if not present fall back to web3 useEffect(() => { async function init() {