mirror of
https://github.com/oceanprotocol/react.git
synced 2025-02-14 21:10:38 +01:00
fix hooks dependencies, prevent some rerenders
This commit is contained in:
parent
22be66dd7d
commit
d8107d6686
@ -1,8 +1,7 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { useOcean } from '../../providers'
|
import { useOcean } from '../../providers'
|
||||||
import { ComputeValue } from './ComputeOptions'
|
import { ComputeValue } from './ComputeOptions'
|
||||||
import { feedback } from './../../utils'
|
import { Logger } from '@oceanprotocol/lib'
|
||||||
import { DID, Logger } from '@oceanprotocol/lib'
|
|
||||||
import { MetadataAlgorithm } from '@oceanprotocol/lib/dist/node/ddo/interfaces/MetadataAlgorithm'
|
import { MetadataAlgorithm } from '@oceanprotocol/lib/dist/node/ddo/interfaces/MetadataAlgorithm'
|
||||||
import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
|
import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
|
||||||
import { checkAndBuyDT } from '../../utils/dtUtils'
|
import { checkAndBuyDT } from '../../utils/dtUtils'
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
import { DID, DDO, Metadata, Logger } from '@oceanprotocol/lib'
|
import { DID, DDO, Metadata, Logger } from '@oceanprotocol/lib'
|
||||||
import { useOcean } from '../../providers'
|
import { useOcean } from '../../providers'
|
||||||
import ProviderStatus from '../../providers/OceanProvider/ProviderStatus'
|
import ProviderStatus from '../../providers/OceanProvider/ProviderStatus'
|
||||||
@ -25,23 +25,29 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
|
|||||||
const [isLoaded, setIsLoaded] = useState(false)
|
const [isLoaded, setIsLoaded] = useState(false)
|
||||||
const [price, setPrice] = useState<BestPrice | undefined>()
|
const [price, setPrice] = useState<BestPrice | undefined>()
|
||||||
|
|
||||||
async function getDDO(did: DID | string): Promise<DDO | null> {
|
const getDDO = useCallback(
|
||||||
if (status !== ProviderStatus.CONNECTED) return null
|
async (did: DID | string): Promise<DDO | null> => {
|
||||||
|
if (status !== ProviderStatus.CONNECTED) return null
|
||||||
|
|
||||||
const ddo = await ocean.metadatastore.retrieveDDO(did)
|
const ddo = await ocean.metadatastore.retrieveDDO(did)
|
||||||
return ddo
|
return ddo
|
||||||
}
|
},
|
||||||
|
[ocean?.metadatastore, status]
|
||||||
|
)
|
||||||
|
|
||||||
async function getPrice(dataTokenAddress?: string): Promise<BestPrice> {
|
const getPrice = useCallback(
|
||||||
if (!dataTokenAddress) dataTokenAddress = internalDdo.dataToken
|
async (dataTokenAddress?: string): Promise<BestPrice> => {
|
||||||
return await getBestDataTokenPrice(ocean, dataTokenAddress, accountId)
|
if (!dataTokenAddress) dataTokenAddress = internalDdo.dataToken
|
||||||
}
|
return await getBestDataTokenPrice(ocean, dataTokenAddress, accountId)
|
||||||
|
},
|
||||||
|
[ocean, accountId, internalDdo?.dataToken]
|
||||||
|
)
|
||||||
|
|
||||||
async function getMetadata(): Promise<Metadata | null> {
|
const getMetadata = useCallback(async (): Promise<Metadata | null> => {
|
||||||
if (!internalDdo) return null
|
if (!internalDdo) return null
|
||||||
const metadata = internalDdo.findServiceByType('metadata')
|
const metadata = internalDdo.findServiceByType('metadata')
|
||||||
return metadata.attributes
|
return metadata.attributes
|
||||||
}
|
}, [internalDdo])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function init(): Promise<void> {
|
async function init(): Promise<void> {
|
||||||
@ -60,7 +66,7 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
init()
|
init()
|
||||||
}, [ocean, status])
|
}, [ocean, status, asset, getDDO])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!accountId) return
|
if (!accountId) return
|
||||||
@ -83,7 +89,7 @@ function useMetadata(asset?: DID | string | DDO): UseMetadata {
|
|||||||
setPrice(price)
|
setPrice(price)
|
||||||
}, 10000)
|
}, 10000)
|
||||||
return () => clearInterval(interval)
|
return () => clearInterval(interval)
|
||||||
}, [accountId, internalDdo])
|
}, [accountId, internalDdo, getMetadata, getPrice])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
ddo: internalDdo,
|
ddo: internalDdo,
|
||||||
|
@ -49,7 +49,7 @@ function usePublish(): UsePublish {
|
|||||||
): Promise<void | null> {
|
): Promise<void | null> {
|
||||||
switch (priceOptions.type) {
|
switch (priceOptions.type) {
|
||||||
case 'dynamic': {
|
case 'dynamic': {
|
||||||
const pool = await ocean.pool.createDTPool(
|
await ocean.pool.createDTPool(
|
||||||
accountId,
|
accountId,
|
||||||
dataTokenAddress,
|
dataTokenAddress,
|
||||||
priceOptions.tokensToMint.toString(),
|
priceOptions.tokensToMint.toString(),
|
||||||
@ -64,7 +64,7 @@ function usePublish(): UsePublish {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixedPriceExchange = await ocean.fixedRateExchange.create(
|
await ocean.fixedRateExchange.create(
|
||||||
dataTokenAddress,
|
dataTokenAddress,
|
||||||
priceOptions.price.toString(),
|
priceOptions.price.toString(),
|
||||||
accountId
|
accountId
|
||||||
|
@ -3,7 +3,9 @@ import React, {
|
|||||||
useState,
|
useState,
|
||||||
useEffect,
|
useEffect,
|
||||||
createContext,
|
createContext,
|
||||||
ReactElement
|
ReactElement,
|
||||||
|
useCallback,
|
||||||
|
ReactNode
|
||||||
} from 'react'
|
} from 'react'
|
||||||
import Web3 from 'web3'
|
import Web3 from 'web3'
|
||||||
import ProviderStatus from './ProviderStatus'
|
import ProviderStatus from './ProviderStatus'
|
||||||
@ -42,7 +44,7 @@ function OceanProvider({
|
|||||||
}: {
|
}: {
|
||||||
initialConfig: Config
|
initialConfig: Config
|
||||||
web3ModalOpts?: Partial<ICoreOptions>
|
web3ModalOpts?: Partial<ICoreOptions>
|
||||||
children: any
|
children: ReactNode
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const [web3, setWeb3] = useState<Web3 | undefined>()
|
const [web3, setWeb3] = useState<Web3 | undefined>()
|
||||||
const [web3Provider, setWeb3Provider] = useState<any | undefined>()
|
const [web3Provider, setWeb3Provider] = useState<any | undefined>()
|
||||||
@ -60,71 +62,74 @@ function OceanProvider({
|
|||||||
ProviderStatus.NOT_AVAILABLE
|
ProviderStatus.NOT_AVAILABLE
|
||||||
)
|
)
|
||||||
|
|
||||||
async function init() {
|
const init = useCallback(async () => {
|
||||||
Logger.log('Ocean Provider init')
|
Logger.log('Ocean Provider init')
|
||||||
window &&
|
window &&
|
||||||
window.ethereum &&
|
window.ethereum &&
|
||||||
(window.ethereum.autoRefreshOnNetworkChange = false)
|
(window.ethereum.autoRefreshOnNetworkChange = false)
|
||||||
|
|
||||||
Logger.log('Web3Modal init.')
|
Logger.log('Web3Modal init.')
|
||||||
if (web3ModalOpts === undefined) {
|
|
||||||
web3ModalOpts = await getDefaultProviders()
|
const web3ModalInstance = new Web3Modal(
|
||||||
}
|
web3ModalOpts || (await getDefaultProviders())
|
||||||
const web3ModalInstance = new Web3Modal(web3ModalOpts)
|
)
|
||||||
setWeb3Modal(web3ModalInstance)
|
setWeb3Modal(web3ModalInstance)
|
||||||
Logger.log('Web3Modal instance created.', web3ModalInstance)
|
Logger.log('Web3Modal instance created.', web3ModalInstance)
|
||||||
}
|
}, [web3ModalOpts])
|
||||||
|
|
||||||
async function connect(newConfig?: Config) {
|
const connect = useCallback(
|
||||||
try {
|
async (newConfig?: Config) => {
|
||||||
Logger.log('Connecting ...', newConfig)
|
try {
|
||||||
|
Logger.log('Connecting ...', newConfig)
|
||||||
|
|
||||||
newConfig && setConfig(newConfig)
|
newConfig && setConfig(newConfig)
|
||||||
|
|
||||||
const provider = await web3Modal?.connect()
|
const provider = await web3Modal?.connect()
|
||||||
setWeb3Provider(provider)
|
setWeb3Provider(provider)
|
||||||
|
|
||||||
const web3 = new Web3(provider)
|
const web3 = new Web3(provider)
|
||||||
setWeb3(web3)
|
setWeb3(web3)
|
||||||
Logger.log('Web3 created.', web3)
|
Logger.log('Web3 created.', web3)
|
||||||
|
|
||||||
const chainId = web3 && (await web3.eth.getChainId())
|
const chainId = web3 && (await web3.eth.getChainId())
|
||||||
setChainId(chainId)
|
setChainId(chainId)
|
||||||
Logger.log('chain id ', chainId)
|
Logger.log('chain id ', chainId)
|
||||||
|
|
||||||
config.web3Provider = web3
|
config.web3Provider = web3
|
||||||
const ocean = await Ocean.getInstance(config)
|
const ocean = await Ocean.getInstance(config)
|
||||||
setOcean(ocean)
|
setOcean(ocean)
|
||||||
Logger.log('Ocean instance created.', ocean)
|
Logger.log('Ocean instance created.', ocean)
|
||||||
|
|
||||||
setStatus(ProviderStatus.CONNECTED)
|
setStatus(ProviderStatus.CONNECTED)
|
||||||
|
|
||||||
const account = (await ocean.accounts.list())[0]
|
const account = (await ocean.accounts.list())[0]
|
||||||
setAccount(account)
|
setAccount(account)
|
||||||
Logger.log('Account ', account)
|
Logger.log('Account ', account)
|
||||||
|
|
||||||
const accountId = await getAccountId(web3)
|
const accountId = await getAccountId(web3)
|
||||||
setAccountId(accountId)
|
setAccountId(accountId)
|
||||||
Logger.log('account id', accountId)
|
Logger.log('account id', accountId)
|
||||||
|
|
||||||
const balance = await getBalance(account)
|
const balance = await getBalance(account)
|
||||||
setBalance(balance)
|
setBalance(balance)
|
||||||
Logger.log('balance', JSON.stringify(balance))
|
Logger.log('balance', JSON.stringify(balance))
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Logger.error(error)
|
Logger.error(error)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
[config, web3Modal]
|
||||||
|
)
|
||||||
|
|
||||||
// On mount setup Web3Modal instance
|
// On mount setup Web3Modal instance
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
init()
|
init()
|
||||||
}, [])
|
}, [init])
|
||||||
|
|
||||||
// Connect automatically to cached provider if present
|
// Connect automatically to cached provider if present
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!web3Modal) return
|
if (!web3Modal) return
|
||||||
web3Modal.cachedProvider && connect()
|
web3Modal.cachedProvider && connect()
|
||||||
}, [web3Modal])
|
}, [web3Modal, connect])
|
||||||
|
|
||||||
async function refreshBalance() {
|
async function refreshBalance() {
|
||||||
const balance = account && (await getBalance(account))
|
const balance = account && (await getBalance(account))
|
||||||
@ -135,14 +140,13 @@ function OceanProvider({
|
|||||||
web3Modal?.clearCachedProvider()
|
web3Modal?.clearCachedProvider()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleAccountsChanged = async (accounts: string[]) => {
|
|
||||||
Logger.debug("Handling 'accountsChanged' event with payload", accounts)
|
|
||||||
connect()
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: #68 Refetch balance periodically, or figure out some event to subscribe to
|
// TODO: #68 Refetch balance periodically, or figure out some event to subscribe to
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const handleAccountsChanged = async (accounts: string[]) => {
|
||||||
|
Logger.debug("Handling 'accountsChanged' event with payload", accounts)
|
||||||
|
connect()
|
||||||
|
}
|
||||||
// web3Modal && web3Modal.on('connect', handleConnect)
|
// web3Modal && web3Modal.on('connect', handleConnect)
|
||||||
|
|
||||||
if (web3Provider !== undefined && web3Provider !== null) {
|
if (web3Provider !== undefined && web3Provider !== null) {
|
||||||
@ -154,7 +158,7 @@ function OceanProvider({
|
|||||||
// web3Provider.removeListener('chainChanged', handleNetworkChanged)
|
// web3Provider.removeListener('chainChanged', handleNetworkChanged)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [web3Modal, web3Provider])
|
}, [web3Modal, web3Provider, connect])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OceanContext.Provider
|
<OceanContext.Provider
|
||||||
|
Loading…
x
Reference in New Issue
Block a user