diff --git a/src/components/Asset/AssetActions/AssetStats/index.tsx b/src/components/Asset/AssetActions/AssetStats/index.tsx
index cc414890c..b460c535d 100644
--- a/src/components/Asset/AssetActions/AssetStats/index.tsx
+++ b/src/components/Asset/AssetActions/AssetStats/index.tsx
@@ -1,16 +1,16 @@
import { useAsset } from '@context/Asset'
import { useUserPreferences } from '@context/UserPreferences'
-import { useWeb3 } from '@context/Web3'
import Tooltip from '@shared/atoms/Tooltip'
import { formatNumber } from '@utils/numbers'
import { getNftOwnAllocation } from '@utils/veAllocation'
import React, { useEffect, useState } from 'react'
+import { useAccount } from 'wagmi'
import styles from './index.module.css'
export default function AssetStats() {
const { locale } = useUserPreferences()
const { asset } = useAsset()
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
const [ownAllocation, setOwnAllocation] = useState(0)
diff --git a/src/components/Asset/AssetActions/ButtonBuy/index.test.tsx b/src/components/Asset/AssetActions/ButtonBuy/index.test.tsx
index dd0a2b3b9..d5453b5a4 100644
--- a/src/components/Asset/AssetActions/ButtonBuy/index.test.tsx
+++ b/src/components/Asset/AssetActions/ButtonBuy/index.test.tsx
@@ -16,7 +16,8 @@ const downloadProps: ButtonBuyProps = {
priceType: 'fixed',
isConsumable: true,
isBalanceSufficient: true,
- consumableFeedback: 'TEST: consumableFeedback'
+ consumableFeedback: 'TEST: consumableFeedback',
+ isAccountConnected: true
}
const computeProps: ButtonBuyProps = {
@@ -114,7 +115,7 @@ describe('Asset/AssetActions/ButtonBuy', () => {
render(
)
expect(
screen.getByText(
- 'To use this algorithm, you will buy 1 dtSymbol and immediately send it back to the publisher. Connect to the correct network to interact with this asset. The C2D resources required to start the job are available, no payment is required for them. Please note that network gas fees still apply, even when using free assets.'
+ 'To use this algorithm, you will buy 1 dtSymbol and immediately send it back to the publisher. Additionally, the selected selectedComputeAssetType is free to use. The C2D resources required to start the job are available, no payment is required for them. Please note that network gas fees still apply, even when using free assets.'
)
).toBeInTheDocument()
})
@@ -123,7 +124,7 @@ describe('Asset/AssetActions/ButtonBuy', () => {
render(
)
expect(
screen.getByText(
- 'This algorithm is free to use. Connect to the correct network to interact with this asset. The C2D resources required to start the job are available, no payment is required for them. Please note that network gas fees still apply, even when using free assets.'
+ 'This algorithm is free to use. Additionally, the selected selectedComputeAssetType is free to use. The C2D resources required to start the job are available, no payment is required for them. Please note that network gas fees still apply, even when using free assets.'
)
).toBeInTheDocument()
})
@@ -132,7 +133,7 @@ describe('Asset/AssetActions/ButtonBuy', () => {
render(
)
expect(
screen.getByText(
- 'To use this algorithm, you will buy 1 dtSymbol and immediately send it back to the publisher. Connect to the correct network to interact with this asset. The C2D resources required to start the job are available, no payment is required for them.'
+ 'To use this algorithm, you will buy 1 dtSymbol and immediately send it back to the publisher. Additionally, you will buy 1 dtSymbol for the selectedComputeAssetType and send it back to the publisher. The C2D resources required to start the job are available, no payment is required for them.'
)
).toBeInTheDocument()
})
diff --git a/src/components/Asset/AssetActions/ButtonBuy/index.tsx b/src/components/Asset/AssetActions/ButtonBuy/index.tsx
index 6bd77e2dc..5517de802 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 '@context/Web3'
-import Web3 from 'web3'
export interface ButtonBuyProps {
action: 'download' | 'compute'
@@ -31,6 +29,7 @@ export interface ButtonBuyProps {
algorithmPriceType?: string
isAlgorithmConsumable?: boolean
isSupportedOceanNetwork?: boolean
+ isAccountConnected?: boolean
hasProviderFee?: boolean
retry?: boolean
}
@@ -46,13 +45,13 @@ function getConsumeHelpText(
isBalanceSufficient: boolean,
consumableFeedback: string,
isSupportedOceanNetwork: boolean,
- web3: Web3,
+ isAccountConnected: boolean,
priceType: string
) {
const text =
isConsumable === false
? consumableFeedback
- : hasPreviousOrder && web3 && isSupportedOceanNetwork
+ : hasPreviousOrder && isAccountConnected && isSupportedOceanNetwork
? `You bought this ${assetType} already allowing you to use it without paying again.`
: hasDatatoken
? `You own ${dtBalance} ${dtSymbol} allowing you to use this dataset by spending 1 ${dtSymbol}, but without paying ${btSymbol} again.`
@@ -74,7 +73,7 @@ function getAlgoHelpText(
hasDatatokenSelectedComputeAsset: boolean,
isBalanceSufficient: boolean,
isSupportedOceanNetwork: boolean,
- web3: Web3,
+ isAccountConnected: boolean,
algorithmPriceType: string
) {
const text =
@@ -82,11 +81,13 @@ function getAlgoHelpText(
isConsumable === false ||
isAlgorithmConsumable === false
? ''
- : hasPreviousOrderSelectedComputeAsset && web3 && isSupportedOceanNetwork
+ : hasPreviousOrderSelectedComputeAsset &&
+ isAccountConnected &&
+ isSupportedOceanNetwork
? `You already bought the selected ${selectedComputeAssetType}, allowing you to use it without paying again.`
: hasDatatokenSelectedComputeAsset
? `You own ${dtBalanceSelectedComputeAsset} ${dtSymbolSelectedComputeAsset} allowing you to use the selected ${selectedComputeAssetType} by spending 1 ${dtSymbolSelectedComputeAsset}, but without paying OCEAN again.`
- : web3 && !isSupportedOceanNetwork
+ : isAccountConnected && !isSupportedOceanNetwork
? `Connect to the correct network to interact with this asset.`
: isBalanceSufficient === false
? ''
@@ -115,7 +116,7 @@ function getComputeAssetHelpText(
selectedComputeAssetType?: string,
isAlgorithmConsumable?: boolean,
isSupportedOceanNetwork?: boolean,
- web3?: Web3,
+ isAccountConnected?: boolean,
hasProviderFee?: boolean
) {
const computeAssetHelpText = getConsumeHelpText(
@@ -129,7 +130,7 @@ function getComputeAssetHelpText(
isBalanceSufficient,
consumableFeedback,
isSupportedOceanNetwork,
- web3,
+ isAccountConnected,
priceType
)
@@ -143,7 +144,7 @@ function getComputeAssetHelpText(
hasDatatokenSelectedComputeAsset,
isBalanceSufficient,
isSupportedOceanNetwork,
- web3,
+ isAccountConnected,
algorithmPriceType
)
@@ -183,9 +184,9 @@ export default function ButtonBuy({
isAlgorithmConsumable,
hasProviderFee,
retry,
- isSupportedOceanNetwork
+ isSupportedOceanNetwork,
+ isAccountConnected
}: ButtonBuyProps): ReactElement {
- const { web3 } = useWeb3()
const buttonText = retry
? 'Retry'
: action === 'download'
@@ -216,7 +217,7 @@ export default function ButtonBuy({
isBalanceSufficient,
consumableFeedback,
isSupportedOceanNetwork,
- web3,
+ isAccountConnected,
priceType
)
} else {
@@ -239,7 +240,7 @@ export default function ButtonBuy({
selectedComputeAssetType,
isAlgorithmConsumable,
isSupportedOceanNetwork,
- web3,
+ isAccountConnected,
hasProviderFee
)
}
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index eb48c68d6..61c7c0acf 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -7,15 +7,17 @@ import { compareAsBN } from '@utils/numbers'
import ButtonBuy from '../ButtonBuy'
import PriceOutput from './PriceOutput'
import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
import content from '../../../../../content/pages/startComputeDataset.json'
import { Asset, ZERO_ADDRESS } from '@oceanprotocol/lib'
import { getAccessDetails } from '@utils/accessDetailsAndPricing'
import { useMarketMetadata } from '@context/MarketMetadata'
import Alert from '@shared/atoms/Alert'
-import { getTokenBalanceFromSymbol } from '@utils/web3'
+import { getTokenBalanceFromSymbol } from '@utils/wallet'
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, isConnected } = useAccount()
+ const { balance } = useBalance()
+ const { isSupportedOceanNetwork } = useNetworkMetadata()
const { isValid, values }: FormikContextType<{ algorithm: string }> =
useFormikContext()
const { asset, isAssetNetwork } = useAsset()
@@ -303,6 +307,7 @@ export default function FormStartCompute({
isSupportedOceanNetwork={isSupportedOceanNetwork}
hasProviderFee={providerFeeAmount && providerFeeAmount !== '0'}
retry={retry}
+ isAccountConnected={isConnected}
/>
)
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
index 73bcc4881..6bc39f2d3 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 '@context/Web3'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
interface PriceOutputProps {
hasPreviousOrder: boolean
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 24db8fd73..acdb1f376 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -20,7 +20,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 '@context/Web3'
import { Formik } from 'formik'
import { getInitialValues, validationSchema } from './_constants'
import FormStartComputeDataset from './FormComputeDataset'
@@ -44,12 +43,12 @@ 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'
+import { useAccount, useSigner } from 'wagmi'
const refreshInterval = 10000 // 10 sec.
+
export default function Compute({
asset,
dtBalance,
@@ -63,9 +62,9 @@ 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()
+ const { data: signer } = useSigner()
const newAbortController = useAbortController()
const newCancelToken = useCancelToken()
@@ -116,10 +115,9 @@ export default function Compute({
const isUnsupportedPricing = asset?.accessDetails?.type === 'NOT_SUPPORTED'
- async function checkAssetDTBalance(asset: DDO): Promise
{
+ async function checkAssetDTBalance(asset: DDO) {
if (!asset?.services[0].datatokenAddress) return
- const web3 = await getDummyWeb3(asset?.chainId)
- const datatokenInstance = new Datatoken(web3)
+ const datatokenInstance = new Datatoken(signer)
const dtBalance = await datatokenInstance.balance(
asset?.services[0].datatokenAddress,
accountId || ZERO_ADDRESS // if the user is not connected, we use ZERO_ADDRESS as accountId
@@ -127,7 +125,6 @@ export default function Compute({
setAlgorithmDTBalance(new Decimal(dtBalance).toString())
const hasAlgoDt = Number(dtBalance) >= 1
setHasAlgoAssetDatatoken(hasAlgoDt)
- return hasAlgoDt
}
async function setComputeFees(
@@ -145,21 +142,22 @@ export default function Compute({
const feeValidity = providerData?.datasets?.[0]?.providerFee?.validUntil
const feeAmount = await unitsToAmount(
- !isSupportedOceanNetwork || !isAssetNetwork
- ? await getDummyWeb3(asset?.chainId)
- : web3,
+ // !isSupportedOceanNetwork || !isAssetNetwork
+ // ? await getDummyWeb3(asset?.chainId)
+ // : web3,
+ signer,
providerFeeToken,
providerFeeAmount
)
setProviderFeeAmount(feeAmount)
- const datatoken = new Datatoken(
- await getDummyWeb3(asset?.chainId),
- null,
- null,
- minAbi
- )
-
+ const datatoken = new Datatoken(signer)
+ // const datatoken = new Datatoken(
+ // await getDummyWeb3(asset?.chainId),
+ // null,
+ // null,
+ // minAbi
+ // )
setProviderFeesSymbol(await datatoken.getSymbol(providerFeeToken))
const computeDuration = asset.accessDetails.validProviderFees
@@ -179,6 +177,7 @@ export default function Compute({
const algorithmOrderPriceAndFees = await getOrderPriceAndFees(
selectedAlgorithmAsset,
ZERO_ADDRESS,
+ signer,
algoProviderFees
)
if (!algorithmOrderPriceAndFees)
@@ -197,6 +196,7 @@ export default function Compute({
const datasetPriceAndFees = await getOrderPriceAndFees(
asset,
ZERO_ADDRESS,
+ signer,
datasetProviderFees
)
if (!datasetPriceAndFees)
@@ -373,11 +373,12 @@ export default function Compute({
)
const algorithmOrderTx = await handleComputeOrder(
- web3,
+ signer,
selectedAlgorithmAsset,
algoOrderPriceAndFees,
accountId,
initializedProviderResponse.algorithm,
+ hasAlgoAssetDatatoken,
computeEnv.consumerAddress
)
if (!algorithmOrderTx) throw new Error('Failed to order algorithm.')
@@ -391,11 +392,12 @@ export default function Compute({
)
const datasetOrderTx = await handleComputeOrder(
- web3,
+ signer,
asset,
datasetOrderPriceAndFees,
accountId,
initializedProviderResponse.datasets[0],
+ hasDatatoken,
computeEnv.consumerAddress
)
if (!datasetOrderTx) throw new Error('Failed to order dataset.')
@@ -414,8 +416,7 @@ export default function Compute({
setComputeStatusText(getComputeFeedback()[4])
const response = await ProviderInstance.computeStart(
asset.services[0].serviceEndpoint,
- web3,
- accountId,
+ signer,
computeEnv?.id,
computeAsset,
computeAlgorithm,
diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download.tsx
index 4aad6a9f8..6c22142ad 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 '@context/Web3'
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, useSigner } from 'wagmi'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
export default function Download({
asset,
@@ -33,7 +34,9 @@ export default function Download({
fileIsLoading?: boolean
consumableFeedback?: string
}): ReactElement {
- const { accountId, web3, isSupportedOceanNetwork } = useWeb3()
+ const { address: accountId, isConnected } = useAccount()
+ const { data: signer } = useSigner()
+ const { isSupportedOceanNetwork } = useNetworkMetadata()
const { getOpcFeeForToken } = useMarketMetadata()
const { isInPurgatory, isAssetNetwork } = useAsset()
const isMounted = useIsMounted()
@@ -72,16 +75,24 @@ export default function Download({
async function init() {
if (
asset.accessDetails.addressOrId === ZERO_ADDRESS ||
- asset.accessDetails.type === 'free' ||
- isLoading
+ asset.accessDetails.type === 'free'
)
return
- !orderPriceAndFees && setIsPriceLoading(true)
+ try {
+ !orderPriceAndFees && setIsPriceLoading(true)
- const _orderPriceAndFees = await getOrderPriceAndFees(asset, ZERO_ADDRESS)
- setOrderPriceAndFees(_orderPriceAndFees)
- !orderPriceAndFees && setIsPriceLoading(false)
+ const _orderPriceAndFees = await getOrderPriceAndFees(
+ asset,
+ ZERO_ADDRESS,
+ signer
+ )
+ setOrderPriceAndFees(_orderPriceAndFees)
+ !orderPriceAndFees && setIsPriceLoading(false)
+ } catch (error) {
+ LoggerInstance.error('getOrderPriceAndFees', error)
+ setIsPriceLoading(false)
+ }
}
init()
@@ -92,7 +103,7 @@ export default function Download({
* Not adding isLoading and getOpcFeeForToken because we set these here. It is a compromise
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [asset, accountId, getOpcFeeForToken, isUnsupportedPricing])
+ }, [asset, getOpcFeeForToken, isUnsupportedPricing])
useEffect(() => {
setHasDatatoken(Number(dtBalance) >= 1)
@@ -144,7 +155,7 @@ export default function Download({
)[3]
)
- await downloadFile(web3, asset, accountId, validOrderTx)
+ await downloadFile(signer, asset, accountId, validOrderTx)
} else {
setStatusText(
getOrderFeedback(
@@ -152,12 +163,19 @@ export default function Download({
asset.accessDetails.datatoken?.symbol
)[asset.accessDetails.type === 'fixed' ? 2 : 1]
)
- const orderTx = await order(web3, asset, orderPriceAndFees, accountId)
- if (!orderTx) {
+ const orderTx = await order(
+ signer,
+ asset,
+ orderPriceAndFees,
+ accountId,
+ hasDatatoken
+ )
+ const tx = await orderTx.wait()
+ if (!tx) {
throw new Error()
}
setIsOwned(true)
- setValidOrderTx(orderTx.transactionHash)
+ setValidOrderTx(tx?.transactionHash)
}
} catch (error) {
LoggerInstance.error(error)
@@ -190,6 +208,7 @@ export default function Download({
consumableFeedback={consumableFeedback}
retry={retry}
isSupportedOceanNetwork={isSupportedOceanNetwork}
+ isAccountConnected={isConnected}
/>
)
diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx
index 6a850e653..60411a674 100644
--- a/src/components/Asset/AssetActions/index.tsx
+++ b/src/components/Asset/AssetActions/index.tsx
@@ -4,7 +4,6 @@ import Download from './Download'
import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
import { compareAsBN } from '@utils/numbers'
import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
import Web3Feedback from '@shared/Web3Feedback'
import { getFileDidInfo, getFileInfo } from '@utils/provider'
import { getOceanConfig } from '@utils/ocean'
@@ -13,15 +12,20 @@ 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/web3'
+import { getTokenBalanceFromSymbol } from '@utils/wallet'
import AssetStats from './AssetStats'
+import { useAccount, useProvider, useNetwork } from 'wagmi'
+import useBalance from '@hooks/useBalance'
export default function AssetActions({
asset
}: {
asset: AssetExtended
}): ReactElement {
- const { accountId, balance, web3, chainId } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { balance } = useBalance()
+ const { chain } = useNetwork()
+ const web3Provider = useProvider()
const { isAssetNetwork } = useAsset()
const newCancelToken = useCancelToken()
const isMounted = useIsMounted()
@@ -72,7 +76,7 @@ export default function AssetActions({
query,
headers,
abi,
- chainId,
+ chain?.id,
method
)
: await getFileDidInfo(asset?.id, asset?.services[0]?.id, providerUrl)
@@ -100,11 +104,11 @@ export default function AssetActions({
// Get and set user DT balance
useEffect(() => {
- if (!web3 || !accountId || !isAssetNetwork) return
+ if (!web3Provider || !accountId || !isAssetNetwork) return
async function init() {
try {
- const datatokenInstance = new Datatoken(web3)
+ const datatokenInstance = new Datatoken(web3Provider as any)
const dtBalance = await datatokenInstance.balance(
asset.services[0].datatokenAddress,
accountId
@@ -115,7 +119,7 @@ export default function AssetActions({
}
}
init()
- }, [web3, accountId, asset, isAssetNetwork])
+ }, [web3Provider, accountId, asset, isAssetNetwork])
// Check user balance against price
useEffect(() => {
diff --git a/src/components/Asset/AssetContent/MetaFull.tsx b/src/components/Asset/AssetContent/MetaFull.tsx
index 60d036ba6..524a3a1c7 100644
--- a/src/components/Asset/AssetContent/MetaFull.tsx
+++ b/src/components/Asset/AssetContent/MetaFull.tsx
@@ -3,28 +3,35 @@ 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'
+import { Asset, LoggerInstance } from '@oceanprotocol/lib'
+import { getPaymentCollector } from '@utils/ocean'
+import { useProvider } from 'wagmi'
export default function MetaFull({ ddo }: { ddo: Asset }): ReactElement {
- const [paymentCollector, setPaymentCollector] = useState()
const { isInPurgatory, assetState } = useAsset()
+ const provider = useProvider()
+
+ const [paymentCollector, setPaymentCollector] = useState()
useEffect(() => {
+ if (!ddo || !provider) return
+
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)
+ const paymentCollector = await getPaymentCollector(
+ ddo.datatokens[0].address,
+ provider
)
+ setPaymentCollector(paymentCollector)
} catch (error) {
- LoggerInstance.error('[MetaFull: getInitialPaymentCollector]', error)
+ LoggerInstance.error(
+ '[MetaFull: getInitialPaymentCollector]',
+ error.message
+ )
}
}
getInitialPaymentCollector()
- }, [ddo])
+ }, [ddo, provider])
function DockerImage() {
const containerInfo = ddo?.metadata?.algorithm?.container
diff --git a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
index 1713d180c..d4f160622 100644
--- a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
+++ b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
@@ -1,10 +1,10 @@
import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
import { Asset } from '@oceanprotocol/lib'
import AddToken from '@shared/AddToken'
import ExplorerLink from '@shared/ExplorerLink'
import Publisher from '@shared/Publisher'
import React, { ReactElement } from 'react'
+import { useAccount } from 'wagmi'
import styles from './MetaAsset.module.css'
export default function MetaAsset({
@@ -15,7 +15,7 @@ export default function MetaAsset({
isBlockscoutExplorer: boolean
}): ReactElement {
const { isAssetNetwork } = useAsset()
- const { web3ProviderInfo } = useWeb3()
+ const { connector: activeConnector } = useAccount()
const dataTokenSymbol = asset?.datatokens[0]?.symbol
@@ -36,7 +36,7 @@ export default function MetaAsset({
>
{`Accessed with ${dataTokenSymbol}`}
- {web3ProviderInfo?.name === 'MetaMask' && isAssetNetwork && (
+ {activeConnector?.name === 'MetaMask' && isAssetNetwork && (
()
useEffect(() => {
- setNftPublisher(
- Web3.utils.toChecksumAddress(
- receipts?.find((e) => e.type === 'METADATA_CREATED')?.nft?.owner
- )
- )
+ if (!receipts.length) return
+
+ const publisher = receipts?.find((e) => e.type === 'METADATA_CREATED')?.nft
+ ?.owner
+ setNftPublisher(publisher)
}, [receipts])
return (
diff --git a/src/components/Asset/Edit/EditComputeDataset.tsx b/src/components/Asset/Edit/EditComputeDataset.tsx
index 0b8fd107b..c6fcb9421 100644
--- a/src/components/Asset/Edit/EditComputeDataset.tsx
+++ b/src/components/Asset/Edit/EditComputeDataset.tsx
@@ -1,4 +1,3 @@
-import { useWeb3 } from '@context/Web3'
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, useSigner } from 'wagmi'
export default function EditComputeDataset({
asset
@@ -31,8 +31,10 @@ export default function EditComputeDataset({
asset: AssetExtended
}): ReactElement {
const { debug } = useUserPreferences()
- const { accountId, web3 } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { data: signer } = useSigner()
const { fetchAsset, isAssetNetwork } = useAsset()
+
const [success, setSuccess] = useState()
const [error, setError] = useState()
const newAbortController = useAbortController()
@@ -46,7 +48,7 @@ export default function EditComputeDataset({
asset?.accessDetails?.isPurchasable
) {
const tx = await setMinterToPublisher(
- web3,
+ signer,
asset?.accessDetails?.datatoken?.address,
accountId,
setError
@@ -84,7 +86,7 @@ export default function EditComputeDataset({
const setMetadataTx = await setNftMetadata(
updatedAsset,
accountId,
- web3,
+ signer,
newAbortController()
)
@@ -97,7 +99,7 @@ export default function EditComputeDataset({
} else {
if (asset.accessDetails.type === 'free') {
const tx = await setMinterToDispenser(
- web3,
+ signer,
asset?.accessDetails?.datatoken?.address,
accountId,
setError
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index a082881e9..a6e401679 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 '@context/Web3'
import { useUserPreferences } from '@context/UserPreferences'
import Web3Feedback from '@shared/Web3Feedback'
import FormEditMetadata from './FormEditMetadata'
@@ -21,13 +20,14 @@ import styles from './index.module.css'
import content from '../../../../content/pages/editMetadata.json'
import { useAbortController } from '@hooks/useAbortController'
import DebugEditMetadata from './DebugEditMetadata'
-import { getOceanConfig } from '@utils/ocean'
+import { getOceanConfig, getPaymentCollector } from '@utils/ocean'
import EditFeedback from './EditFeedback'
import { useAsset } from '@context/Asset'
import { setNftMetadata } from '@utils/nft'
import { sanitizeUrl } from '@utils/url'
import { getEncryptedFiles } from '@utils/provider'
import { assetStateToNumber } from '@utils/assetState'
+import { useAccount, useProvider, useNetwork, useSigner } from 'wagmi'
export default function Edit({
asset
@@ -36,8 +36,12 @@ export default function Edit({
}): ReactElement {
const { debug } = useUserPreferences()
const { fetchAsset, isAssetNetwork, assetState } = useAsset()
- const { accountId, web3, chainId } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { chain } = useNetwork()
+ const provider = useProvider()
+ const { data: signer } = useSigner()
const newAbortController = useAbortController()
+
const [success, setSuccess] = useState()
const [paymentCollector, setPaymentCollector] = useState()
const [error, setError] = useState()
@@ -45,12 +49,15 @@ export default function Edit({
const hasFeedback = error || success
useEffect(() => {
+ if (!asset || !provider) return
+
async function getInitialPaymentCollector() {
try {
- const datatoken = new Datatoken(web3)
- setPaymentCollector(
- await datatoken.getPaymentCollector(asset?.datatokens[0].address)
+ const paymentCollector = await getPaymentCollector(
+ asset.datatokens[0].address,
+ provider
)
+ setPaymentCollector(paymentCollector)
} catch (error) {
LoggerInstance.error(
'[EditMetadata: getInitialPaymentCollector]',
@@ -59,18 +66,17 @@ export default function Edit({
}
}
getInitialPaymentCollector()
- }, [asset, web3])
+ }, [asset, provider])
async function updateFixedPrice(newPrice: string) {
const config = getOceanConfig(asset.chainId)
const fixedRateInstance = new FixedRateExchange(
config.fixedRateExchangeAddress,
- web3
+ signer
)
const setPriceResp = await fixedRateInstance.setRate(
- accountId,
asset.accessDetails.addressOrId,
newPrice.toString()
)
@@ -103,7 +109,7 @@ export default function Edit({
(await updateFixedPrice(values.price))
if (values.paymentCollector !== paymentCollector) {
- const datatoken = new Datatoken(web3)
+ const datatoken = new Datatoken(signer)
await datatoken.setPaymentCollector(
asset?.datatokens[0].address,
accountId,
@@ -115,7 +121,9 @@ export default function Edit({
const file = {
nftAddress: asset.nftAddress,
datatokenAddress: asset.services[0].datatokenAddress,
- files: [normalizeFile(values.files[0].type, values.files[0], chainId)]
+ files: [
+ normalizeFile(values.files[0].type, values.files[0], chain?.id)
+ ]
}
const filesEncrypted = await getEncryptedFiles(
@@ -146,12 +154,12 @@ export default function Edit({
const setMetadataTx = await setNftMetadata(
updatedAsset,
accountId,
- web3,
+ signer,
newAbortController()
)
if (values.assetState !== assetState) {
- const nft = new Nft(web3)
+ const nft = new Nft(signer)
await nft.setMetadataState(
asset?.nftAddress,
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index bc29ca701..472907f29 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -1,6 +1,6 @@
import { FileInfo } from '@oceanprotocol/lib'
import * as Yup from 'yup'
-import web3 from 'web3'
+import { isAddress } from 'ethers/lib/utils'
import { testLinks } from '../../../@utils/yup'
export const validationSchema = Yup.object().shape({
@@ -41,7 +41,7 @@ export const validationSchema = Yup.object().shape({
'ValidAddress',
'Must be a valid Ethereum Address.',
(value) => {
- return web3.utils.isAddress(value)
+ return isAddress(value)
}
),
retireAsset: Yup.string()
diff --git a/src/components/Header/Wallet/Account.tsx b/src/components/Header/Wallet/Account.tsx
index d19a01f0a..aa37837c9 100644
--- a/src/components/Header/Wallet/Account.tsx
+++ b/src/components/Header/Wallet/Account.tsx
@@ -1,30 +1,38 @@
import React, { FormEvent } from 'react'
import Caret from '@images/caret.svg'
-import { accountTruncate } from '@utils/web3'
-import Loader from '@shared/atoms/Loader'
+import { accountTruncate } from '@utils/wallet'
+// import Loader from '@shared/atoms/Loader'
import styles from './Account.module.css'
-import { useWeb3 } from '@context/Web3'
import Avatar from '@shared/atoms/Avatar'
+import { useAccount, useEnsName, useEnsAvatar } from 'wagmi'
+import { useModal } from 'connectkit'
// Forward ref for Tippy.js
// eslint-disable-next-line
const Account = React.forwardRef((props, ref: any) => {
- const { accountId, accountEns, accountEnsAvatar, web3Modal, connect } =
- useWeb3()
+ const { address: accountId } = useAccount()
+ const { data: accountEns } = useEnsName({ address: accountId, chainId: 1 })
+ const { data: accountEnsAvatar } = useEnsAvatar({
+ address: accountId,
+ chainId: 1
+ })
+ const { setOpen } = useModal()
async function handleActivation(e: FormEvent) {
// prevent accidentially submitting a form the button might be in
e.preventDefault()
- await connect()
+ setOpen(true)
}
- return !accountId && web3Modal?.cachedProvider ? (
- // Improve user experience for cached provider when connecting takes some time
- e.preventDefault()}>
-
- ) : accountId ? (
+ // return
+ // !accountId && provider ? (
+ // // Improve user experience for cached provider when connecting takes some time
+ // e.preventDefault()}>
+ //
+ // ) :
+ return accountId ? (
()
const [oceanTokenMetadata, setOceanTokenMetadata] = useState<{
@@ -30,19 +30,19 @@ export default function Details(): ReactElement {
}>()
useEffect(() => {
- if (!networkId) return
+ if (!chain?.id) return
const symbol = networkData?.nativeCurrency.symbol
setMainCurrency(symbol)
- const oceanConfig = getOceanConfig(networkId)
+ const oceanConfig = getOceanConfig(chain.id)
oceanConfig &&
setOceanTokenMetadata({
address: oceanConfig.oceanTokenAddress,
symbol: oceanConfig.oceanTokenSymbol
})
- }, [networkData, networkId])
+ }, [networkData, chain?.id])
return (
@@ -68,10 +68,10 @@ export default function Details(): ReactElement {
-
- {web3ProviderInfo?.name === 'MetaMask' && (
+ {activeConnector?.name === 'MetaMask' && (
{
- await web3Modal?.clearCachedProvider()
connect()
checkOrbisConnection({ address: accountId })
}}
@@ -95,7 +94,7 @@ export default function Details(): ReactElement {
style="text"
size="small"
onClick={() => {
- logout()
+ disconnect()
disconnectOrbis(accountId)
location.reload()
}}
diff --git a/src/components/Header/Wallet/Network.tsx b/src/components/Header/Wallet/Network.tsx
index 79dab5384..59342d51d 100644
--- a/src/components/Header/Wallet/Network.tsx
+++ b/src/components/Header/Wallet/Network.tsx
@@ -2,21 +2,23 @@ import React, { ReactElement } from 'react'
import Status from '@shared/atoms/Status'
import Badge from '@shared/atoms/Badge'
import Tooltip from '@shared/atoms/Tooltip'
-import { useWeb3 } from '@context/Web3'
import NetworkName from '@shared/NetworkName'
import styles from './Network.module.css'
+import { useNetwork } from 'wagmi'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
export default function Network(): ReactElement {
- const { networkId, isTestnet, isSupportedOceanNetwork } = useWeb3()
+ const { chain } = useNetwork()
+ const { isTestnet, isSupportedOceanNetwork } = useNetworkMetadata()
- return networkId ? (
+ return chain?.id ? (
{!isSupportedOceanNetwork && (
)}
-
) : null
diff --git a/src/components/Header/Wallet/index.tsx b/src/components/Header/Wallet/index.tsx
index 3207b6cc8..8573ef2bf 100644
--- a/src/components/Header/Wallet/index.tsx
+++ b/src/components/Header/Wallet/index.tsx
@@ -4,10 +4,10 @@ import Details from './Details'
import Tooltip from '@shared/atoms/Tooltip'
import Network from './Network'
import styles from './index.module.css'
-import { useWeb3 } from '@context/Web3'
+import { useAccount } from 'wagmi'
export default function Wallet(): ReactElement {
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
return (
diff --git a/src/components/Home/Allocations/index.tsx b/src/components/Home/Allocations/index.tsx
index a58c7890f..ff91a0cee 100644
--- a/src/components/Home/Allocations/index.tsx
+++ b/src/components/Home/Allocations/index.tsx
@@ -1,5 +1,4 @@
import React, { ReactElement, useEffect, useState } from 'react'
-import { useWeb3 } from '@context/Web3'
import { AssetWithOwnAllocation, getOwnAllocations } from '@utils/veAllocation'
import styles from './index.module.css'
import {
@@ -12,9 +11,10 @@ import { useCancelToken } from '@hooks/useCancelToken'
import { useIsMounted } from '@hooks/useIsMounted'
import { LoggerInstance } from '@oceanprotocol/lib'
import AssetListTable from './AssetListTable'
+import { useAccount } from 'wagmi'
export default function Allocations(): ReactElement {
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
const { chainIds } = useUserPreferences()
const isMounted = useIsMounted()
const newCancelToken = useCancelToken()
diff --git a/src/components/Home/Bookmarks.tsx b/src/components/Home/Bookmarks.tsx
index cd3037dac..a34f7175c 100644
--- a/src/components/Home/Bookmarks.tsx
+++ b/src/components/Home/Bookmarks.tsx
@@ -7,8 +7,8 @@ import Tooltip from '@shared/atoms/Tooltip'
import AssetTitle from '@shared/AssetListTitle'
import { getAssetsFromDids } from '@utils/aquarius'
import { useCancelToken } from '@hooks/useCancelToken'
-import { useWeb3 } from '@context/Web3'
import { useMarketMetadata } from '@context/MarketMetadata'
+import { useAccount } from 'wagmi'
const columns: TableOceanColumn
[] = [
{
@@ -38,7 +38,7 @@ const columns: TableOceanColumn[] = [
export default function Bookmarks(): ReactElement {
const { appConfig } = useMarketMetadata()
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
const { bookmarks } = useUserPreferences()
const [pinned, setPinned] = useState()
diff --git a/src/components/Home/TopSales/Account/index.tsx b/src/components/Home/TopSales/Account/index.tsx
index 49465cb7b..2f9d576c3 100644
--- a/src/components/Home/TopSales/Account/index.tsx
+++ b/src/components/Home/TopSales/Account/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
import Dotdotdot from 'react-dotdotdot'
import Link from 'next/link'
import styles from './index.module.css'
-import { accountTruncate } from '@utils/web3'
+import { accountTruncate } from '@utils/wallet'
import Avatar from '../../../@shared/atoms/Avatar'
import { getEnsProfile } from '@utils/ens'
import { UserSales } from '@utils/aquarius'
diff --git a/src/components/Profile/Header/Account.tsx b/src/components/Profile/Header/Account.tsx
index 2f3c28eb9..2520ebfce 100644
--- a/src/components/Profile/Header/Account.tsx
+++ b/src/components/Profile/Header/Account.tsx
@@ -7,7 +7,7 @@ import Copy from '@shared/atoms/Copy'
import Avatar from '@shared/atoms/Avatar'
import styles from './Account.module.css'
import { useProfile } from '@context/Profile'
-import { accountTruncate } from '@utils/web3'
+import { accountTruncate } from '@utils/wallet'
export default function Account({
accountId
diff --git a/src/components/Profile/Header/Stats.tsx b/src/components/Profile/Header/Stats.tsx
index fbd474761..00613f3f9 100644
--- a/src/components/Profile/Header/Stats.tsx
+++ b/src/components/Profile/Header/Stats.tsx
@@ -8,14 +8,14 @@ import { useProfile } from '@context/Profile'
import { getLocked } from '@utils/veAllocation'
import PriceUnit from '@shared/Price/PriceUnit'
import Button from '@shared/atoms/Button'
-import { useWeb3 } from '@context/Web3'
+import { useAccount } from 'wagmi'
export default function Stats({
accountId
}: {
accountId: string
}): ReactElement {
- const web3 = useWeb3()
+ const { address } = useAccount()
const { chainIds } = useUserPreferences()
const { assets, assetsTotal, sales } = useProfile()
@@ -73,7 +73,7 @@ export default function Stats({
()
const newCancelToken = useCancelToken()
+ const isFinished = job.dateFinished !== null
+
useEffect(() => {
async function getAssetMetadata() {
const ddo = await getAsset(job.inputDID[0], newCancelToken())
@@ -62,8 +64,7 @@ export default function Results({
try {
const jobResult = await providerInstance.getComputeResultUrl(
datasetProvider,
- web3,
- accountId,
+ signer,
job.jobId,
resultIndex
)
diff --git a/src/components/Profile/History/ComputeJobs/index.tsx b/src/components/Profile/History/ComputeJobs/index.tsx
index 0000aff20..e6d760af1 100644
--- a/src/components/Profile/History/ComputeJobs/index.tsx
+++ b/src/components/Profile/History/ComputeJobs/index.tsx
@@ -2,13 +2,13 @@ import React, { ReactElement, useState } from 'react'
import Time from '@shared/atoms/Time'
import Table, { TableOceanColumn } from '@shared/atoms/Table'
import Button from '@shared/atoms/Button'
-import { useWeb3 } from '@context/Web3'
import Details from './Details'
import Refresh from '@images/refresh.svg'
import { useUserPreferences } from '@context/UserPreferences'
import NetworkName from '@shared/NetworkName'
import styles from './index.module.css'
import AssetListTitle from '@shared/AssetListTitle'
+import { useAccount } from 'wagmi'
export function Status({ children }: { children: string }): ReactElement {
return {children}
@@ -55,7 +55,7 @@ export default function ComputeJobs({
isLoading?: boolean
refetchJobs?: any
}): ReactElement {
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
const { chainIds } = useUserPreferences()
const [columnsMinimal] = useState([columns[4], columns[5], columns[3]])
@@ -84,6 +84,6 @@ export default function ComputeJobs({
/>
) : (
- Please connect your Web3 wallet.
+ Please connect your wallet.
)
}
diff --git a/src/components/Profile/History/Downloads.tsx b/src/components/Profile/History/Downloads.tsx
index 57a102f45..805f4c366 100644
--- a/src/components/Profile/History/Downloads.tsx
+++ b/src/components/Profile/History/Downloads.tsx
@@ -42,6 +42,6 @@ export default function ComputeDownloads({
emptyMessage={chainIds.length === 0 ? 'No network selected' : null}
/>
) : (
- Please connect your Web3 wallet.
+ Please connect your wallet.
)
}
diff --git a/src/components/Profile/History/PublishedList.tsx b/src/components/Profile/History/PublishedList.tsx
index 5ce3251d5..f4a0147ab 100644
--- a/src/components/Profile/History/PublishedList.tsx
+++ b/src/components/Profile/History/PublishedList.tsx
@@ -97,6 +97,6 @@ export default function PublishedList({
/>
) : (
- Please connect your Web3 wallet.
+ Please connect your wallet.
)
}
diff --git a/src/components/Profile/History/index.tsx b/src/components/Profile/History/index.tsx
index c70aed51f..74fefe24a 100644
--- a/src/components/Profile/History/index.tsx
+++ b/src/components/Profile/History/index.tsx
@@ -4,11 +4,11 @@ import PublishedList from './PublishedList'
import Downloads from './Downloads'
import ComputeJobs from './ComputeJobs'
import styles from './index.module.css'
-import { useWeb3 } from '@context/Web3'
import { getComputeJobs } from '@utils/compute'
import { useUserPreferences } from '@context/UserPreferences'
import { useCancelToken } from '@hooks/useCancelToken'
import { LoggerInstance } from '@oceanprotocol/lib'
+import { useAccount } from 'wagmi'
interface HistoryTab {
title: string
@@ -56,7 +56,7 @@ export default function HistoryPage({
}: {
accountIdentifier: string
}): ReactElement {
- const { accountId } = useWeb3()
+ const { address: accountId } = useAccount()
const { chainIds } = useUserPreferences()
const newCancelToken = useCancelToken()
diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx
index 09e57c4e6..30dd949b4 100644
--- a/src/components/Publish/Actions/index.tsx
+++ b/src/components/Publish/Actions/index.tsx
@@ -5,12 +5,12 @@ import { FormikContextType, useFormikContext } from 'formik'
import { FormPublishData } from '../_types'
import { wizardSteps } from '../_constants'
import SuccessConfetti from '@shared/SuccessConfetti'
-import { useWeb3 } from '@context/Web3'
import { useRouter } from 'next/router'
import Tooltip from '@shared/atoms/Tooltip'
import AvailableNetworks from '@components/Publish/AvailableNetworks'
import Info from '@images/info.svg'
import Loader from '@shared/atoms/Loader'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
export default function Actions({
scrollToRef,
@@ -20,21 +20,19 @@ export default function Actions({
did: string
}): ReactElement {
const router = useRouter()
- const { isSupportedOceanNetwork } = useWeb3()
+ const { isSupportedOceanNetwork } = useNetworkMetadata()
const {
values,
errors,
isValid,
isSubmitting
}: FormikContextType = useFormikContext()
- const { connect, accountId } = useWeb3()
+ // async function handleActivation(e: FormEvent) {
+ // // prevent accidentially submitting a form the button might be in
+ // e.preventDefault()
- async function handleActivation(e: FormEvent) {
- // prevent accidentially submitting a form the button might be in
- e.preventDefault()
-
- await connect()
- }
+ // await connect()
+ // }
function handleAction(action: string) {
const currentStep: string = router.query.step as string
@@ -92,11 +90,12 @@ export default function Actions({
>
Continue
- ) : !accountId ? (
-
- Connect Wallet
-
- ) : !isSupportedOceanNetwork ? (
+ ) : // !address ? (
+ //
+ // Connect Wallet
+ //
+ // ) :
+ !isSupportedOceanNetwork ? (
data.chainId === chainId)
- addCustomNetwork(web3Provider, networkNode)
+ // addCustomNetwork(networkNode)
}
return (
diff --git a/src/components/Publish/Debug/index.tsx b/src/components/Publish/Debug/index.tsx
index 95adb67dc..64676c969 100644
--- a/src/components/Publish/Debug/index.tsx
+++ b/src/components/Publish/Debug/index.tsx
@@ -6,18 +6,18 @@ import { transformPublishFormToDdo } from '../_utils'
import styles from './index.module.css'
import { DDO } from '@oceanprotocol/lib'
import { previewDebugPatch } from '@utils/ddo'
-import { useWeb3 } from '@context/Web3'
+import { useNetwork } from 'wagmi'
export default function Debug(): ReactElement {
const { values } = useFormikContext()
const [valuePreview, setValuePreview] = useState({})
const [ddo, setDdo] = useState()
- const { chainId } = useWeb3()
+ const { chain } = useNetwork()
useEffect(() => {
async function makeDdo() {
const ddo = await transformPublishFormToDdo(values)
- setValuePreview(previewDebugPatch(values, chainId))
+ setValuePreview(previewDebugPatch(values, chain?.id))
setDdo(ddo)
}
makeDdo()
diff --git a/src/components/Publish/Pricing/Fees.tsx b/src/components/Publish/Pricing/Fees.tsx
index c2fa9ea7a..17cca7231 100644
--- a/src/components/Publish/Pricing/Fees.tsx
+++ b/src/components/Publish/Pricing/Fees.tsx
@@ -4,9 +4,9 @@ import styles from './Fees.module.css'
import Input from '@shared/FormInput'
import { getOpcFees } from '@utils/subgraph'
import { OpcFeesQuery_opc as OpcFeesData } from '../../../@types/subgraph/OpcFeesQuery'
-import { useWeb3 } from '@context/Web3'
import { useMarketMetadata } from '@context/MarketMetadata'
import Decimal from 'decimal.js'
+import { useNetwork } from 'wagmi'
const Default = ({
title,
@@ -40,18 +40,18 @@ export default function Fees({
tooltips: { [key: string]: string }
}): ReactElement {
const [oceanCommunitySwapFee, setOceanCommunitySwapFee] = useState('')
- const { chainId } = useWeb3()
+ const { chain } = useNetwork()
const { appConfig } = useMarketMetadata()
useEffect(() => {
- getOpcFees(chainId || 1).then((response: OpcFeesData) => {
+ getOpcFees(chain?.id || 1).then((response: OpcFeesData) => {
setOceanCommunitySwapFee(
response?.swapOceanFee
? new Decimal(response.swapOceanFee).mul(100).toString()
: '0'
)
})
- }, [chainId])
+ }, [chain?.id])
return (
<>
diff --git a/src/components/Publish/Pricing/index.tsx b/src/components/Publish/Pricing/index.tsx
index eae2a2fa6..4043b6ee2 100644
--- a/src/components/Publish/Pricing/index.tsx
+++ b/src/components/Publish/Pricing/index.tsx
@@ -7,11 +7,13 @@ import Free from './Free'
import content from '../../../../content/price.json'
import styles from './index.module.css'
import { useMarketMetadata } from '@context/MarketMetadata'
-import { useWeb3 } from '@context/Web3'
+import { useNetwork } from 'wagmi'
export default function PricingFields(): ReactElement {
const { appConfig } = useMarketMetadata()
- const { approvedBaseTokens, chainId } = useWeb3()
+ const { chain } = useNetwork()
+ const { approvedBaseTokens } = useMarketMetadata()
+
// Connect with main publish form
const { values, setFieldValue } = useFormikContext()
const { pricing } = values
@@ -22,6 +24,23 @@ export default function PricingFields(): ReactElement {
token.name.toLowerCase().includes('ocean')
) || approvedBaseTokens?.[0]
+ const isBaseTokenSet = !!approvedBaseTokens?.find(
+ (token) => token?.address === values?.pricing?.baseToken?.address
+ )
+
+ useEffect(() => {
+ if (!approvedBaseTokens?.length) return
+ if (isBaseTokenSet) return
+ setFieldValue('pricing.baseToken', defaultBaseToken)
+ }, [
+ approvedBaseTokens,
+ chain?.id,
+ defaultBaseToken,
+ isBaseTokenSet,
+ setFieldValue,
+ values.pricing.baseToken
+ ])
+
// Switch type value upon tab change
function handleTabChange(tabName: string) {
const type = tabName.toLowerCase()
diff --git a/src/components/Publish/Steps.tsx b/src/components/Publish/Steps.tsx
index eb81ded36..5c6b845e8 100644
--- a/src/components/Publish/Steps.tsx
+++ b/src/components/Publish/Steps.tsx
@@ -1,28 +1,31 @@
import { ReactElement, useEffect } from 'react'
import { useFormikContext } from 'formik'
import { wizardSteps, initialPublishFeedback } from './_constants'
-import { useWeb3 } from '@context/Web3'
import { FormPublishData, PublishFeedback } from './_types'
import { getOceanConfig } from '@utils/ocean'
+import { useAccount, useNetwork } from 'wagmi'
+import { useMarketMetadata } from '@context/MarketMetadata'
export function Steps({
feedback
}: {
feedback: PublishFeedback
}): ReactElement {
- const { chainId, accountId, approvedBaseTokens } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { chain } = useNetwork()
+ const { approvedBaseTokens } = useMarketMetadata()
const { values, setFieldValue, touched, setTouched } =
useFormikContext()
const isCustomProviderUrl = values?.services?.[0]?.providerUrl.custom
- // auto-sync user chainId & account into form data values
+ // auto-sync user chain?.id & account into form data values
useEffect(() => {
- if (!chainId || !accountId) return
+ if (!chain?.id || !accountId) return
- setFieldValue('user.chainId', chainId)
+ setFieldValue('user.chainId', chain?.id)
setFieldValue('user.accountId', accountId)
- }, [chainId, accountId, setFieldValue])
+ }, [chain?.id, accountId, setFieldValue])
useEffect(() => {
if (!approvedBaseTokens?.length) return
@@ -37,7 +40,7 @@ export function Steps({
if (isBaseTokenSet) return
setFieldValue('pricing.baseToken', defaultBaseToken)
- }, [approvedBaseTokens])
+ }, [approvedBaseTokens, values?.pricing?.baseToken?.address])
// auto-sync publish feedback into form data values
useEffect(() => {
diff --git a/src/components/Publish/Title/index.tsx b/src/components/Publish/Title/index.tsx
index 72f8ddefb..7ccd89bb6 100644
--- a/src/components/Publish/Title/index.tsx
+++ b/src/components/Publish/Title/index.tsx
@@ -3,16 +3,19 @@ import NetworkName from '@shared/NetworkName'
import Tooltip from '@shared/atoms/Tooltip'
import styles from './index.module.css'
import content from '../../../../content/publish/index.json'
-import { useWeb3 } from '@context/Web3'
import Info from '@images/info.svg'
import AvailableNetworks from '@components/Publish/AvailableNetworks'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import { useAccount } from 'wagmi'
export default function Title({
networkId
}: {
networkId: number
}): ReactElement {
- const { isSupportedOceanNetwork, accountId } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { isSupportedOceanNetwork } = useNetworkMetadata()
+
return (
<>
{content.title}{' '}
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 375a9c6fa..acf0f03f4 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -11,13 +11,13 @@ import {
NftCreateData,
NftFactory,
Service,
- ZERO_ADDRESS
+ ZERO_ADDRESS,
+ getEventFromTx
} from '@oceanprotocol/lib'
import { mapTimeoutStringToSeconds, normalizeFile } 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 +28,7 @@ import {
} from '../../../app.config'
import { sanitizeUrl } from '@utils/url'
import { getContainerChecksum } from '@utils/docker'
+import { parseEther } from 'ethers/lib/utils'
function getUrlFileExtension(fileUrl: string): string {
const splittedFileUrl = fileUrl.split('.')
@@ -193,8 +194,7 @@ export async function createTokensAndPricing(
values: FormPublishData,
accountId: string,
config: Config,
- nftFactory: NftFactory,
- web3: Web3
+ nftFactory: NftFactory
) {
const nftCreateData: NftCreateData = generateNftCreateData(
values.metadata.nft,
@@ -241,15 +241,18 @@ export async function createTokensAndPricing(
)
const result = await nftFactory.createNftWithDatatokenWithFixedRate(
- accountId,
nftCreateData,
ercParams,
freParams
)
- erc721Address = result.events.NFTCreated.returnValues[0]
- datatokenAddress = result.events.TokenCreated.returnValues[0]
- txHash = result.transactionHash
+ const trxReceipt = await result.wait()
+ const nftCreatedEvent = getEventFromTx(trxReceipt, 'NFTCreated')
+ const tokenCreatedEvent = getEventFromTx(trxReceipt, 'TokenCreated')
+
+ erc721Address = nftCreatedEvent.args.newTokenAddress
+ datatokenAddress = tokenCreatedEvent.args.newTokenAddress
+ txHash = trxReceipt.transactionHash
LoggerInstance.log('[publish] createNftErcWithFixedRate tx', txHash)
@@ -261,8 +264,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: parseEther('1').toString(),
+ maxBalance: parseEther('1').toString(),
withMint: true,
allowedSwapper: ZERO_ADDRESS
}
@@ -273,14 +276,17 @@ export async function createTokensAndPricing(
)
const result = await nftFactory.createNftWithDatatokenWithDispenser(
- accountId,
nftCreateData,
ercParams,
dispenserParams
)
- erc721Address = result.events.NFTCreated.returnValues[0]
- datatokenAddress = result.events.TokenCreated.returnValues[0]
- txHash = result.transactionHash
+ const trxReceipt = await result.wait()
+ const nftCreatedEvent = getEventFromTx(trxReceipt, 'NFTCreated')
+ const tokenCreatedEvent = getEventFromTx(trxReceipt, 'TokenCreated')
+
+ erc721Address = nftCreatedEvent.args.newTokenAddress
+ datatokenAddress = tokenCreatedEvent.args.newTokenAddress
+ txHash = trxReceipt.transactionHash
LoggerInstance.log('[publish] createNftErcWithDispenser tx', txHash)
diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx
index 4d029b340..065dcbacb 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 '@context/Web3'
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, useSigner } from 'wagmi'
export default function PublishPage({
content
@@ -26,7 +26,9 @@ 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 { data: signer } = useSigner()
+ const { chain } = useNetwork()
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
const scrollToRef = useRef()
const nftFactory = useNftFactory()
@@ -60,17 +62,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.')
@@ -197,23 +193,24 @@ export default function PublishPage({
const res = await setNFTMetadataAndTokenURI(
ddo,
accountId,
- web3,
+ signer,
values.metadata.nft,
newAbortController()
)
- if (!res?.transactionHash)
+ const tx = await res.wait()
+ if (!tx?.transactionHash)
throw new Error(
'Metadata could not be written into the NFT. Please try again.'
)
- LoggerInstance.log('[publish] setMetadata result', res)
+ LoggerInstance.log('[publish] setMetadata result', tx)
setFeedback((prevState) => ({
...prevState,
'3': {
...prevState['3'],
- status: res ? 'success' : 'error',
- txHash: res?.transactionHash
+ status: tx ? 'success' : 'error',
+ txHash: tx?.transactionHash
}
}))
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d08210dc0..f48892393 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,18 +1,19 @@
// import App from "next/app";
import React, { ReactElement, useEffect } from 'react'
import type { AppProps /*, AppContext */ } from 'next/app'
-import Web3Provider from '@context/Web3'
import { UserPreferencesProvider } from '@context/UserPreferences'
import PricesProvider from '@context/Prices'
import UrqlProvider from '@context/UrqlProvider'
import ConsentProvider from '@context/CookieConsent'
+import App from '../../src/components/App'
import { OrbisProvider } from '@context/DirectMessages'
-import App from 'src/components/App'
-
import '@oceanprotocol/typographies/css/ocean-typo.css'
import '../stylesGlobal/styles.css'
import Decimal from 'decimal.js'
import MarketMetadataProvider from '@context/MarketMetadata'
+import { WagmiConfig } from 'wagmi'
+import { ConnectKitProvider } from 'connectkit'
+import { connectKitTheme, wagmiClient } from '@utils/wallet'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useRouter } from 'next/router'
@@ -40,25 +41,32 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
}, [router.events])
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 86955e436..ff467f384 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,19 +1,21 @@
import React, { ReactElement, useEffect, useState } from 'react'
import Page from '@shared/Page'
import ProfilePage from '../../components/Profile'
-import { accountTruncate } from '@utils/web3'
-import { useWeb3 } from '@context/Web3'
+import { accountTruncate } from '@utils/wallet'
import ProfileProvider from '@context/Profile'
import { getEnsAddress, getEnsName } from '@utils/ens'
import { useRouter } from 'next/router'
-import web3 from 'web3'
+import { useAccount, useEnsName } from 'wagmi'
+import { isAddress } from 'ethers/lib/utils'
export default function PageProfile(): ReactElement {
const router = useRouter()
- const { accountId, accountEns } = useWeb3()
+ const { address: accountId } = useAccount()
+ const { data: accountEns } = useEnsName({ address: accountId })
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() {
@@ -30,7 +32,7 @@ export default function PageProfile(): ReactElement {
const pathAccount = router.query.account as string
// Path has ETH address
- if (web3.utils.isAddress(pathAccount)) {
+ if (isAddress(pathAccount)) {
setOwnAccount(pathAccount === accountId)
const finalAccountId = pathAccount || accountId
setFinalAccountId(finalAccountId)
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
index 14dfe67a5..c90ca9167 100644
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@@ -1,10 +1,10 @@
import React, { ReactElement, useState } from 'react'
import Search from '../components/Search'
import Page from '@shared/Page'
-import { accountTruncate } from '@utils/web3'
+import { accountTruncate } from '@utils/wallet'
import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
import { useRouter } from 'next/router'
-import web3 from 'web3'
+import { isAddress } from 'ethers/lib/utils'
export default function PageSearch(): ReactElement {
const router = useRouter()
@@ -13,7 +13,7 @@ export default function PageSearch(): ReactElement {
const [totalResults, setTotalResults] = useState()
const [totalPagesNumber, setTotalPagesNumber] = useState()
- const isETHAddress = web3.utils.isAddress(text as string)
+ const isETHAddress = isAddress(text as string)
const searchValue =
(isETHAddress ? accountTruncate(text as string) : text) ||
tags ||
diff --git a/src/stylesGlobal/_web3modal.css b/src/stylesGlobal/_web3modal.css
deleted file mode 100644
index 1ec020909..000000000
--- a/src/stylesGlobal/_web3modal.css
+++ /dev/null
@@ -1,151 +0,0 @@
-div.web3modal-modal-lightbox,
-div.walletconnect-qrcode__base {
- background: var(--background-body-transparent);
- backdrop-filter: blur(3px);
- overflow-x: hidden;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- animation: fadeIn 0.2s ease-out backwards;
-}
-
-div.web3modal-modal-card {
- border-radius: var(--border-radius);
- padding: var(--spacer);
- margin: var(--spacer) auto;
- max-width: 100%;
- border: 1px solid var(--border-color);
- box-shadow: 0 6px 15px 0 var(--box-shadow-color);
- animation: moveUp 0.2s ease-out backwards;
- grid-template-columns: 1fr;
-}
-
-div.web3modal-provider-wrapper {
- border: 0;
- border-bottom: 1px solid var(--border-color);
- padding: 0;
-}
-
-div.web3modal-provider-wrapper:last-child {
- border-bottom: 0;
-}
-
-div.web3modal-provider-container {
- border-radius: 0;
- padding: var(--spacer);
-}
-
-@media (min-width: 40rem) {
- div.web3modal-modal-card {
- grid-template-columns: 1fr 1fr;
- max-width: var(--break-point--small);
- }
-
- div.web3modal-provider-wrapper {
- border-bottom: 0;
- }
-
- div.web3modal-provider-wrapper:nth-child(1),
- div.web3modal-provider-wrapper:nth-child(2) {
- border-bottom: 1px solid var(--border-color);
- }
-
- div.web3modal-provider-wrapper:nth-child(2n + 1) {
- border-right: 1px solid var(--border-color);
- }
-}
-
-div.web3modal-provider-icon {
- filter: grayscale(1) contrast(150%);
- transition: filter 0.2s ease-out;
-}
-
-div.web3modal-provider-wrapper:hover div.web3modal-provider-icon {
- filter: none;
-}
-
-div.web3modal-provider-name {
- font-size: var(--font-size-large);
- font-weight: var(--font-weight-bold);
- font-family: var(--font-family-heading);
-}
-
-div.web3modal-provider-description {
- font-size: var(--font-size-base);
- margin-top: 0;
-}
-
-div.walletconnect-modal__base {
- background: var(--background-body);
- border-radius: var(--border-radius);
- border: 1px solid var(--border-color);
- box-shadow: 0 6px 17px 0 var(--box-shadow-color);
-}
-
-div.walletconnect-modal__mobile__toggle {
- width: 95%;
- text-transform: uppercase;
- cursor: pointer;
- background: var(--background-body);
- border: 1px solid var(--border-color);
-}
-
-div.walletconnect-modal__mobile__toggle a {
- color: var(--color-secondary);
- font-weight: var(--font-weight-bold);
- font-size: var(--font-size-small);
- padding: calc(var(--spacer) / 12) var(--spacer);
- white-space: nowrap;
-}
-
-div.walletconnect-modal__mobile__toggle_selector {
- background: var(--font-color-heading);
- color: var(--background-body);
- border-color: var(--font-color-heading);
- height: calc(100% - calc(var(--spacer) / 12));
- top: calc(var(--spacer) / 24);
-}
-
-div.walletconnect-modal__header p {
- color: var(--font-color-heading);
-}
-
-p.walletconnect-qrcode__text {
- color: var(--color-secondary);
-}
-
-h3.walletconnect-modal__base__row__h3 {
- font-size: var(--font-size-base);
- color: var(--font-color-text);
-}
-
-svg.walletconnect-qrcode__image path:first-child {
- fill: var(--background-body);
-}
-
-svg.walletconnect-qrcode__image path:last-child {
- stroke: var(--font-color-heading);
-}
-
-#torusIframe {
- z-index: 3;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@keyframes moveUp {
- from {
- transform: translate3d(0, 1rem, 0);
- }
-
- to {
- transform: translate3d(0, 0, 0);
- }
-}
diff --git a/src/stylesGlobal/styles.css b/src/stylesGlobal/styles.css
index 210d14818..c52de3456 100644
--- a/src/stylesGlobal/styles.css
+++ b/src/stylesGlobal/styles.css
@@ -162,7 +162,6 @@ table th {
@import '_code.css';
@import '_toast.css';
-@import '_web3modal.css';
@import '_emojipicker.css';
/* prevent background scrolling */