diff --git a/example/src/AllDdos.tsx b/example/src/AllDdos.tsx index 3df4027..73d4b70 100644 --- a/example/src/AllDdos.tsx +++ b/example/src/AllDdos.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { useOcean, usePublish } from '@oceanprotocol/react' +import { useOcean } from '@oceanprotocol/react' import { DDO } from '@oceanprotocol/lib' import { useState } from 'react' import { useEffect } from 'react' import shortid from 'shortid' import { MetadataExample } from './MetadataExample' export function AllDdos() { - const { accountId, chainId, account, ocean } = useOcean() + const { chainId, account, ocean } = useOcean() const [ddos, setDdos] = useState() diff --git a/example/src/App.tsx b/example/src/App.tsx index 0453244..8a183f0 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -3,19 +3,20 @@ import './App.css' import { OceanProvider } from '@oceanprotocol/react' import { Wallet } from './Wallet' import { Publish } from './Publish' -import { Config, ConfigHelper } from '@oceanprotocol/lib' +// import { Config } from '@oceanprotocol/lib' +import { ConfigHelper } from '@oceanprotocol/lib' import { AllDdos } from './AllDdos' import { ConsumeDdo } from './ConsumeDdo' import { NetworkMonitor } from './NetworkMonitor' import { MetadataExample } from './MetadataExample' // factory Address needs to be updated each time you deploy the contract on local network -const config = { - metadataStoreUri: 'http://aquarius:5000', - providerUri: 'http://localhost:8030', - nodeUri: `http://localhost:8545`, - factoryAddress: '0x2fC1fd21cb222Dc180Ef817dE4c426fd9230b5A5' -} as Config +// const config: Config = { +// metadataStoreUri: 'http://aquarius:5000', +// providerUri: 'http://localhost:8030', +// nodeUri: `http://localhost:8545`, +// factoryAddress: '0x2fC1fd21cb222Dc180Ef817dE4c426fd9230b5A5' +// } const configRinkeby = new ConfigHelper().getConfig('rinkeby') diff --git a/example/src/ConsumeDdo.tsx b/example/src/ConsumeDdo.tsx index 0c51daf..9ab237a 100644 --- a/example/src/ConsumeDdo.tsx +++ b/example/src/ConsumeDdo.tsx @@ -1,17 +1,15 @@ import React from 'react' import { useOcean, - usePublish, useConsume, useCompute, computeOptions } from '@oceanprotocol/react' -import { Metadata, DDO } from '@oceanprotocol/lib' import { useState } from 'react' import { useEffect } from 'react' export function ConsumeDdo() { - const { accountId, ocean } = useOcean() + const { ocean } = useOcean() const { consumeStepText, consume, consumeError } = useConsume() const { compute, computeStepText } = useCompute() const [did, setDid] = useState() diff --git a/example/src/MetadataExample.tsx b/example/src/MetadataExample.tsx index e2a50dc..c78ae59 100644 --- a/example/src/MetadataExample.tsx +++ b/example/src/MetadataExample.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { useMetadata } from '@oceanprotocol/react' import { DDO } from '@oceanprotocol/lib' diff --git a/example/src/NetworkMonitor.tsx b/example/src/NetworkMonitor.tsx index 862c51e..f6f19fb 100644 --- a/example/src/NetworkMonitor.tsx +++ b/example/src/NetworkMonitor.tsx @@ -1,26 +1,29 @@ -import React from 'react' +import React, { useCallback } from 'react' import { useOcean } from '@oceanprotocol/react' import { ConfigHelper } from '@oceanprotocol/lib' import { useEffect } from 'react' -export function NetworkMonitor() { +export const NetworkMonitor = () => { const { connect, web3Provider } = useOcean() - const handleNetworkChanged = (chainId: number) => { + const handleNetworkChanged = useCallback((chainId: number) => { // const config = getOceanConfig(chainId) // temp hack let network = '' switch (chainId) { case 1: { - network = 'mainnet' + network = 'mainnet'; + break; } case 4: { - network = 'rinkeby' + network = 'rinkeby'; + break; } } const config = new ConfigHelper().getConfig(network) connect(config) - } + }, [connect]); + useEffect(() => { if (!web3Provider) return @@ -29,7 +32,7 @@ export function NetworkMonitor() { return () => { web3Provider.removeListener('chainChanged', handleNetworkChanged) } - }, [web3Provider]) + }, [web3Provider, handleNetworkChanged]) return <> } diff --git a/example/src/Publish.tsx b/example/src/Publish.tsx index 030534f..5d020f3 100644 --- a/example/src/Publish.tsx +++ b/example/src/Publish.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { useOcean, usePublish } from '@oceanprotocol/react' +import { usePublish } from '@oceanprotocol/react' +// import { useOcean, usePublish } from '@oceanprotocol/react' import { DDO } from '@oceanprotocol/lib' import { useState } from 'react' import { Metadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Metadata' export function Publish() { - const { accountId, ocean } = useOcean() + // const { accountId, ocean } = useOcean() const { publish, publishStepText, isLoading } = usePublish() const [ddo, setDdo] = useState() @@ -31,17 +32,14 @@ export function Publish() { } const publishAsset = async () => { - console.log(isLoading) const ddo = await publish(asset as Metadata, '90', 'access', '', '') - console.log(ddo) - console.log(isLoading) - const pool = ocean.pool.createDTPool( - accountId, - ddo.dataToken, - '90', - '9', - '0.03' - ) + // const pool = ocean.pool.createDTPool( + // accountId, + // ddo.dataToken, + // '90', + // '9', + // '0.03' + // ) setDdo(ddo) } return ( diff --git a/example/src/Wallet.tsx b/example/src/Wallet.tsx index f988b8d..48b6d21 100644 --- a/example/src/Wallet.tsx +++ b/example/src/Wallet.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback } from 'react' import { useOcean } from '@oceanprotocol/react' import { useEffect } from 'react' @@ -9,16 +9,14 @@ export function Wallet() { await connect() } - const init = async () => { - if (ocean === undefined || accountId === undefined) return - - const assets = await ocean.assets.ownerAssets(accountId) - console.log(assets) - } + const init = useCallback(async () => { + if (ocean === undefined || accountId === undefined) return; + await ocean.assets.ownerAssets(accountId); + }, [accountId, ocean]) useEffect(() => { init() - }, [ocean, accountId]) + }, [ocean, accountId, init]) const disc = async () => { await logout()