1
0
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:
Matthias Kretschmann 2020-09-23 19:37:46 +02:00
parent 22be66dd7d
commit d8107d6686
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 73 additions and 64 deletions

View File

@ -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'

View File

@ -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,

View File

@ -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

View File

@ -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