oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

move OceanProvider to asset route

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-05-31 14:27:04 +02:00
parent 3332249928
commit 21792e9d4f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
20 changed files with 287 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -132,15 +132,19 @@ const queryLatest = {
}
function Component() {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const [result, setResult] = useState<QueryResult>()
useEffect(() => {
if (!metadataCacheUri) return
if (!appConfig.metadataCacheUri) return
const source = axios.CancelToken.source()
async function init() {
const result = await queryMetadata(query, metadataCacheUri, source.token)
const result = await queryMetadata(
query,
appConfig.metadataCacheUri,
source.token
)
setResult(result)
}
init()
@ -148,7 +152,7 @@ function Component() {
return () => {
source.cancel()
}
}, [metadataCacheUri, query])
}, [appConfig.metadataCacheUri, query])
return <div>{result}</div>
}

1
app.config.js
View File

@ -1,4 +1,5 @@
module.exports = {
metadataCacheUri: 'https://aquarius.mainnet.oceanprotocol.com',
// List of supported chainIds which metadata cache queries
// will return by default
chainIds: [1, 3, 4, 137, 1287],

2
package-lock.json generated
View File

@ -43525,6 +43525,7 @@
"node-abort-controller": "^2.0.0",
"save-file": "^2.3.1",
"uuid": "^8.3.2",
"web3": "^1.3.5",
"web3-eth-contract": "^1.3.6"
}
},
@ -43599,6 +43600,7 @@
"integrity": "sha512-5vwpq6kbvwkQwKqAoOU3L72GZ3Ta8RRrewKj9OJRolx28KLJJ8Dg9Rf7obRwt5jQA9bkYd8gqzMTrI7H3xLfaw==",
"dev": true,
"requires": {
"@oclif/config": "^1.15.1",
"@oclif/errors": "^1.3.3",
"@oclif/parser": "^3.8.3",
"@oclif/plugin-help": "^3",

13
src/components/molecules/AssetListTitle.tsx
View File

@ -5,6 +5,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
import { getAssetsNames } from '../../utils/aquarius'
import styles from './AssetListTitle.module.css'
import axios from 'axios'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
export default function AssetListTitle({
ddo,
@ -15,11 +16,11 @@ export default function AssetListTitle({
did?: string
title?: string
}): ReactElement {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const [assetTitle, setAssetTitle] = useState<string>(title)
useEffect(() => {
if (title || !metadataCacheUri) return
if (title || !appConfig.metadataCacheUri) return
if (ddo) {
const { attributes } = ddo.findServiceByType('metadata')
setAssetTitle(attributes.main.name)
@ -29,7 +30,11 @@ export default function AssetListTitle({
const source = axios.CancelToken.source()
async function getAssetName() {
const title = await getAssetsNames([did], metadataCacheUri, source.token)
const title = await getAssetsNames(
[did],
appConfig.metadataCacheUri,
source.token
)
setAssetTitle(title[did])
}
@ -38,7 +43,7 @@ export default function AssetListTitle({
return () => {
source.cancel()
}
}, [assetTitle, metadataCacheUri, ddo, did, title])
}, [assetTitle, appConfig.metadataCacheUri, ddo, did, title])
return (
<h3 className={styles.title}>

9
src/components/molecules/Bookmarks.tsx
View File

@ -8,6 +8,7 @@ import Tooltip from '../atoms/Tooltip'
import AssetTitle from './AssetListTitle'
import { queryMetadata } from '../../utils/aquarius'
import axios, { CancelToken } from 'axios'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
async function getAssetsBookmarked(
bookmarks: string[],
@ -78,7 +79,7 @@ const columns = [
]
export default function Bookmarks(): ReactElement {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const { bookmarks } = useUserPreferences()
const [pinned, setPinned] = useState<DDO[]>()
@ -87,7 +88,7 @@ export default function Bookmarks(): ReactElement {
const networkName = (config as ConfigHelperConfig)?.network
useEffect(() => {
if (!metadataCacheUri || !networkName || bookmarks === {}) return
if (!appConfig.metadataCacheUri || !networkName || bookmarks === {}) return
const source = axios.CancelToken.source()
@ -102,7 +103,7 @@ export default function Bookmarks(): ReactElement {
try {
const resultPinned = await getAssetsBookmarked(
bookmarks[networkName],
metadataCacheUri,
appConfig.metadataCacheUri,
source.token
)
setPinned(resultPinned?.results)
@ -117,7 +118,7 @@ export default function Bookmarks(): ReactElement {
return () => {
source.cancel()
}
}, [bookmarks, metadataCacheUri, networkName])
}, [bookmarks, appConfig.metadataCacheUri, networkName])
return (
<Table

36
src/components/molecules/Wallet/Details.tsx
View File

@ -9,21 +9,37 @@ import { useWeb3 } from '../../../providers/Web3'
import Web3Feedback from '../Web3Feedback'
import styles from './Details.module.css'
import { getOceanTokenData } from '../../../utils/ocean'
export default function Details(): ReactElement {
const { web3Provider, web3ProviderInfo, connect, logout, networkData } =
const {
web3Provider,
web3ProviderInfo,
connect,
logout,
networkData,
networkId,
balance
} = useWeb3()
// const { balance, config } = useOcean()
const { oceanConfigs } = useOcean()
const { locale } = useUserPreferences()
const [mainCurrency, setMainCurrency] = useState<string>()
const [oceanTokenMetadata, setOceanTokenMetadata] =
useState<{
address: string
symbol: string
}>()
// const [portisNetwork, setPortisNetwork] = useState<string>()
useEffect(() => {
if (!networkData) return
setMainCurrency(networkData.nativeCurrency.symbol)
}, [networkData])
oceanConfigs &&
setOceanTokenMetadata(getOceanTokenData(networkId || 1, oceanConfigs))
}, [networkData, networkId, oceanConfigs])
// Handle network change for Portis
// async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {
@ -38,17 +54,17 @@ export default function Details(): ReactElement {
return (
<div className={styles.details}>
<ul>
{/* {Object.entries(balance).map(([key, value]) => (
{Object.entries(balance).map(([key, value]) => (
<li className={styles.balance} key={key}>
<span className={styles.symbol}>
{key === 'eth' ? mainCurrency : config.oceanTokenSymbol}
{key === 'eth' ? mainCurrency : oceanTokenMetadata?.symbol}
</span>{' '}
{formatCurrency(Number(value), '', locale, false, {
significantFigures: 4
})}
{key === 'ocean' && <Conversion price={value} />}
</li>
))} */}
))}
<li className={styles.actions}>
<div title="Connected provider" className={styles.walletInfo}>
@ -66,14 +82,14 @@ export default function Details(): ReactElement {
onChange={handlePortisNetworkChange}
/>
)} */}
{/* {web3ProviderInfo?.name === 'MetaMask' && (
{web3ProviderInfo?.name === 'MetaMask' && (
<AddToken
address={config.oceanTokenAddress}
symbol={config.oceanTokenSymbol}
address={oceanTokenMetadata?.address}
symbol={oceanTokenMetadata?.symbol}
logo="https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png"
className={styles.addToken}
/>
)} */}
)}
</div>
<p>
{web3ProviderInfo?.name === 'Portis' && (

6
src/components/organisms/AssetActions/Compute/index.tsx
View File

@ -55,7 +55,7 @@ export default function Compute({
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { accountId } = useWeb3()
const { ocean, account, metadataCacheUri } = useOcean()
const { ocean, account } = useOcean()
const { price, type, ddo, isAssetNetwork } = useAsset()
const { buyDT, pricingError, pricingStepText } = usePricing()
const [isJobStarting, setIsJobStarting] = useState(false)
@ -150,13 +150,13 @@ export default function Compute({
getQuerryString(
computeService.attributes.main.privacy.publisherTrustedAlgorithms
),
metadataCacheUri,
appConfig.metadataCacheUri,
source.token
)
setDdoAlgorithmList(gueryResults.results)
algorithmSelectionList = await transformDDOToAssetSelection(
gueryResults.results,
metadataCacheUri,
appConfig.metadataCacheUri,
[]
)
}

10
src/components/organisms/AssetActions/Edit/FormEditComputeDataset.tsx
View File

@ -16,6 +16,7 @@ import { useAsset } from '../../../../providers/Asset'
import { ComputePrivacyForm } from '../../../../models/FormEditComputeDataset'
import { publisherTrustedAlgorithm as PublisherTrustedAlgorithm } from '@oceanprotocol/lib'
import axios from 'axios'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
export default function FormEditComputeDataset({
data,
@ -26,8 +27,9 @@ export default function FormEditComputeDataset({
title: string
setShowEdit: (show: boolean) => void
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { accountId } = useWeb3()
const { ocean, metadataCacheUri } = useOcean()
const { ocean } = useOcean()
const { ddo } = useAsset()
const { isValid, values }: FormikContextType<ComputePrivacyForm> =
useFormikContext()
@ -51,12 +53,12 @@ export default function FormEditComputeDataset({
}
const querryResult = await queryMetadata(
query,
metadataCacheUri,
appConfig.metadataCacheUri,
source.token
)
const algorithmSelectionList = await transformDDOToAssetSelection(
querryResult.results,
metadataCacheUri,
appConfig.metadataCacheUri,
publisherTrustedAlgorithms
)
return algorithmSelectionList
@ -66,7 +68,7 @@ export default function FormEditComputeDataset({
getAlgorithmList(publisherTrustedAlgorithms).then((algorithms) => {
setAllAlgorithms(algorithms)
})
}, [metadataCacheUri, publisherTrustedAlgorithms])
}, [appConfig.metadataCacheUri, publisherTrustedAlgorithms])
return (
<Form className={styles.form}>

11
src/components/pages/History/ComputeJobs/Details.tsx
View File

@ -10,6 +10,7 @@ import { retrieveDDO } from '../../../../utils/aquarius'
import { useOcean } from '../../../../providers/Ocean'
import Results from './Results'
import styles from './Details.module.css'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
function Asset({
title,
@ -41,7 +42,7 @@ function Asset({
}
function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const [algoName, setAlgoName] = useState<string>()
const [algoDtSymbol, setAlgoDtSymbol] = useState<string>()
@ -49,14 +50,18 @@ function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
async function getAlgoMetadata() {
const source = axios.CancelToken.source()
const ddo = await retrieveDDO(job.algoDID, metadataCacheUri, source.token)
const ddo = await retrieveDDO(
job.algoDID,
appConfig.metadataCacheUri,
source.token
)
setAlgoDtSymbol(ddo.dataTokenInfo.symbol)
const { attributes } = ddo.findServiceByType('metadata')
setAlgoName(attributes?.main.name)
}
getAlgoMetadata()
}, [metadataCacheUri, job.algoDID])
}, [appConfig.metadataCacheUri, job.algoDID])
return (
<>

10
src/components/pages/History/ComputeJobs/index.tsx
View File

@ -17,6 +17,7 @@ import Details from './Details'
import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
import styles from './index.module.css'
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
const getComputeOrders = gql`
query ComputeOrders($user: String!) {
@ -99,7 +100,8 @@ async function getAssetMetadata(
}
export default function ComputeJobs(): ReactElement {
const { ocean, account, metadataCacheUri, config } = useOcean()
const { appConfig } = useSiteMetadata()
const { ocean, account } = useOcean()
const { accountId } = useWeb3()
const [isLoading, setIsLoading] = useState(true)
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
@ -128,7 +130,7 @@ export default function ComputeJobs(): ReactElement {
const source = axios.CancelToken.source()
const assets = await getAssetMetadata(
queryDtList,
metadataCacheUri,
appConfig.metadataCacheUri,
source.token
)
const providers: Provider[] = []
@ -232,12 +234,12 @@ export default function ComputeJobs(): ReactElement {
}
useEffect(() => {
if (data === undefined || !metadataCacheUri) {
if (data === undefined || !appConfig.metadataCacheUri) {
setIsLoading(false)
return
}
getJobs()
}, [ocean, account, data, metadataCacheUri])
}, [ocean, account, data, appConfig.metadataCacheUri])
return (
<>

47
src/components/pages/Home.tsx
View File

@ -15,8 +15,32 @@ import { queryMetadata } from '../../utils/aquarius'
import { getHighestLiquidityDIDs } from '../../utils/subgraph'
import { DDO, Logger } from '@oceanprotocol/lib'
import { useWeb3 } from '../../providers/Web3'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
import { getOceanConfig } from '../../utils/ocean'
const queryLatest = {
// TODO: these queries need to adapt to chainIds
function getQueryHighest(chainIds: number[]) {
return {
page: 1,
offset: 9,
query: {
query_string: {
query: `(price.type:pool) -isInPurgatory:true`
}
},
sort: { 'price.ocean': -1 }
}
}
function sortElements(items: DDO[], sorted: string[]) {
items.sort(function (a, b) {
return sorted.indexOf(a.dataToken) - sorted.indexOf(b.dataToken)
})
return items
}
function getQueryLatest(chainIds: number[]) {
return {
page: 1,
offset: 9,
query: {
@ -25,12 +49,7 @@ const queryLatest = {
}
},
sort: { created: -1 }
}
function sortElements(items: DDO[], sorted: string[]) {
items.sort(function (a, b) {
return sorted.indexOf(a.dataToken) - sorted.indexOf(b.dataToken)
})
}
return items
}
@ -45,12 +64,12 @@ function SectionQueryResult({
action?: ReactElement
queryData?: string
}) {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const [result, setResult] = useState<QueryResult>()
const [loading, setLoading] = useState<boolean>()
useEffect(() => {
if (!metadataCacheUri) return
if (!appConfig.metadataCacheUri) return
const source = axios.CancelToken.source()
async function init() {
@ -58,7 +77,7 @@ function SectionQueryResult({
setLoading(true)
const result = await queryMetadata(
query,
metadataCacheUri,
appConfig.metadataCacheUri,
source.token
)
if (result.totalResults <= 15) {
@ -83,7 +102,7 @@ function SectionQueryResult({
return () => {
source.cancel()
}
}, [metadataCacheUri, query])
}, [appConfig.metadataCacheUri, query])
return (
<section className={styles.section}>
@ -99,8 +118,9 @@ function SectionQueryResult({
}
export default function HomePage(): ReactElement {
const { config, loading } = useOcean()
// TODO: appConfig.chainIds needs to come from UserPreferences instead
const [queryAndDids, setQueryAndDids] = useState<[SearchQuery, string]>()
const { appConfig } = useSiteMetadata()
const { web3Loading, web3Provider } = useWeb3()
useEffect(() => {
@ -135,13 +155,14 @@ export default function HomePage(): ReactElement {
<SectionQueryResult
title="Highest Liquidity"
query={queryAndDids[0]}
// query={getQueryHighest(appConfig.chainIds)}
queryData={queryAndDids[1]}
/>
)}
<SectionQueryResult
title="Recently Published"
query={queryLatest}
query={getQueryLatest(appConfig.chainIds)}
action={
<Button style="text" to="/search?sort=created&sortOrder=desc">
All data sets and algorithms →

20
src/components/templates/Search/index.tsx
View File

@ -9,8 +9,7 @@ import Sort from './sort'
import { getResults } from './utils'
import { navigate } from 'gatsby'
import { updateQueryStringParameter } from '../../../utils'
import Loader from '../../atoms/Loader'
import { useOcean } from '../../../providers/Ocean'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
export default function SearchPage({
location,
@ -19,7 +18,7 @@ export default function SearchPage({
location: Location
setTotalResults: (totalResults: number) => void
}): ReactElement {
const { metadataCacheUri } = useOcean()
const { appConfig } = useSiteMetadata()
const parsed = queryString.parse(location.search)
const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
const [queryResult, setQueryResult] = useState<QueryResult>()
@ -31,18 +30,27 @@ export default function SearchPage({
)
useEffect(() => {
if (!metadataCacheUri) return
if (!appConfig.metadataCacheUri) return
async function initSearch() {
setLoading(true)
setTotalResults(undefined)
const queryResult = await getResults(parsed, metadataCacheUri)
const queryResult = await getResults(parsed, appConfig.metadataCacheUri)
setQueryResult(queryResult)
setTotalResults(queryResult.totalResults)
setLoading(false)
}
initSearch()
}, [text, owner, tags, sort, page, serviceType, sortOrder, metadataCacheUri])
}, [
text,
owner,
tags,
sort,
page,
serviceType,
sortOrder,
appConfig.metadataCacheUri
])
function setPage(page: number) {
const newUrl = updateQueryStringParameter(

4
src/helpers/wrapRootElement.tsx
View File

@ -12,13 +12,13 @@ export default function wrapRootElement({
}): ReactElement {
return (
<Web3Provider>
<OceanProvider>
{/* <OceanProvider> */}
<ApolloClientProvider>
<UserPreferencesProvider>
<PricesProvider>{element}</PricesProvider>
</UserPreferencesProvider>
</ApolloClientProvider>
</OceanProvider>
{/* </OceanProvider> */}
</Web3Provider>
)
}

2
src/hooks/useSiteMetadata.ts
View File

@ -20,6 +20,7 @@ interface UseSiteMetadata {
polygon: string
}
appConfig: {
metadataCacheUri: string
infuraProjectId: string
chainIds: number[]
marketFeeAddress: string
@ -52,6 +53,7 @@ const query = graphql`
polygon
}
appConfig {
metadataCacheUri
infuraProjectId
chainIds
marketFeeAddress

3
src/pages/asset/index.tsx
View File

@ -2,6 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
import { PageProps } from 'gatsby'
import PageTemplateAssetDetails from '../../components/templates/PageAssetDetails'
import AssetProvider from '../../providers/Asset'
import OceanProvider from '../../providers/Ocean'
export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
const [did, setDid] = useState<string>()
@ -12,7 +13,9 @@ export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
return (
<AssetProvider asset={did}>
<OceanProvider>
<PageTemplateAssetDetails uri={props.location.pathname} />
</OceanProvider>
</AssetProvider>
)
}

15
src/providers/ApolloClientProvider.tsx
View File

@ -5,10 +5,11 @@ import {
InMemoryCache,
NormalizedCacheObject
} from '@apollo/client'
import { Logger, ConfigHelperConfig } from '@oceanprotocol/lib'
import { useOcean } from './Ocean'
import { Logger } from '@oceanprotocol/lib'
import fetch from 'cross-fetch'
import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
import { useWeb3 } from './Web3'
import { getOceanConfig } from '../utils/ocean'
let apolloClient: ApolloClient<NormalizedCacheObject>
function createClient(subgraphUri: string) {
@ -32,21 +33,23 @@ export default function ApolloClientProvider({
}: {
children: ReactNode
}): ReactElement {
const { config } = useOcean()
const { networkId } = useWeb3()
const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>()
useEffect(() => {
if (!(config as ConfigHelperConfig)?.subgraphUri) {
const { subgraphUri } = getOceanConfig(networkId || 1)
if (!subgraphUri) {
Logger.error(
'No subgraphUri defined, preventing ApolloProvider from initialization.'
)
return
}
const newClient = createClient((config as ConfigHelperConfig).subgraphUri)
const newClient = createClient(subgraphUri)
apolloClient = newClient
setClient(newClient)
}, [config])
}, [networkId])
return client ? (
<ApolloProvider client={client}>{children}</ApolloProvider>

15
src/providers/Asset.tsx
View File

@ -16,6 +16,8 @@ import { getPrice } from '../utils/subgraph'
import { MetadataMarket } from '../@types/MetaData'
import { useOcean } from './Ocean'
import { useWeb3 } from './Web3'
import { getOceanConfig } from '../utils/ocean'
import { useSiteMetadata } from '../hooks/useSiteMetadata'
interface AssetProviderValue {
isInPurgatory: boolean
@ -44,8 +46,9 @@ function AssetProvider({
asset: string | DDO
children: ReactNode
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { networkId } = useWeb3()
const { metadataCacheUri } = useOcean()
const [isInPurgatory, setIsInPurgatory] = useState(false)
const [purgatoryData, setPurgatoryData] = useState<PurgatoryData>()
const [ddo, setDDO] = useState<DDO>()
@ -60,7 +63,11 @@ function AssetProvider({
const fetchDdo = async (token?: CancelToken) => {
Logger.log('[asset] Init asset, get DDO')
const ddo = await retrieveDDO(asset as string, metadataCacheUri, token)
const ddo = await retrieveDDO(
asset as string,
appConfig.metadataCacheUri,
token
)
if (!ddo) {
setError(
@ -82,7 +89,7 @@ function AssetProvider({
// Get and set DDO based on passed DDO or DID
//
useEffect(() => {
if (!asset || !metadataCacheUri) return
if (!asset || !appConfig.metadataCacheUri) return
const source = axios.CancelToken.source()
let isMounted = true
@ -99,7 +106,7 @@ function AssetProvider({
isMounted = false
source.cancel()
}
}, [asset, metadataCacheUri])
}, [asset, appConfig.metadataCacheUri])
const setPurgatory = useCallback(async (did: string): Promise<void> => {
if (!did) return

122
src/providers/Ocean.tsx
View File

@ -16,112 +16,59 @@ import {
} from '@oceanprotocol/lib'
import { useWeb3 } from './Web3'
import {
getDevelopmentConfig,
getOceanConfig,
getUserInfo
} from '../utils/ocean'
import { UserBalance } from '../@types/TokenBalance'
import { useSiteMetadata } from '../hooks/useSiteMetadata'
const refreshInterval = 20000 // 20 sec.
import { getDevelopmentConfig, getOceanConfig } from '../utils/ocean'
import { useAsset } from './Asset'
interface OceanProviderValue {
oceanConfigs: ConfigHelperConfig[]
metadataCacheUri: string
ocean: Ocean
config: ConfigHelperConfig
account: Account
balance: UserBalance
loading: boolean
connect: (config?: Config) => Promise<void>
refreshBalance: () => Promise<void>
connect: (config: Config) => Promise<void>
}
const OceanContext = createContext({} as OceanProviderValue)
function OceanProvider({ children }: { children: ReactNode }): ReactElement {
const { appConfig } = useSiteMetadata()
const { web3, accountId, networkId } = useWeb3()
const { web3, accountId } = useWeb3()
const { ddo } = useAsset()
const [oceanConfigs, setOceanConfigs] = useState<ConfigHelperConfig[]>()
const [metadataCacheUri, setMetadataCacheUri] = useState<string>()
const [ocean, setOcean] = useState<Ocean>()
const [account, setAccount] = useState<Account>()
const [balance, setBalance] = useState<UserBalance>({
eth: undefined,
ocean: undefined
})
const [config, setConfig] = useState<ConfigHelperConfig | Config>()
// -----------------------------------
// Initially get all supported configs
// from ocean.js ConfigHelper
// -----------------------------------
useEffect(() => {
const allConfigs = appConfig.chainIds.map((chainId: number) =>
getOceanConfig(chainId)
)
setOceanConfigs(allConfigs)
setMetadataCacheUri(allConfigs[0].metadataCacheUri)
}, [])
// -----------------------------------
// Set active config
// -----------------------------------
// useEffect(() => {
// const config = {
// ...getOceanConfig(networkId || 'mainnet'),
// // add local dev values
// ...(networkId === 8996 && {
// ...getDevelopmentConfig()
// })
// }
// setConfig(config)
// // Sync config.metadataCacheUri with metadataCacheUri
// setMetadataCacheUri(config.metadataCacheUri)
// }, [networkId])
// -----------------------------------
// Create Ocean instance
// Helper: Create Ocean instance
// -----------------------------------
const connect = useCallback(
async (config: ConfigHelperConfig | Config) => {
if (!web3) return
if (!web3 || !ddo) return
const newConfig: Config = {
...config,
web3Provider: web3
}
try {
Logger.log('[ocean] Connecting Ocean...', config)
config.web3Provider = web3
setConfig(config)
const newOcean = await Ocean.getInstance(config)
Logger.log('[ocean] Connecting Ocean...', newConfig)
const newOcean = await Ocean.getInstance(newConfig)
setOcean(newOcean)
Logger.log('[ocean] Ocean instance created.', newOcean)
} catch (error) {
Logger.error('[ocean] Error: ', error.message)
}
},
[web3]
[web3, ddo]
)
// async function refreshBalance() {
// if (!ocean || !account || !web3) return
// const { balance } = await getUserInfo(ocean)
// setBalance(balance)
// }
// -----------------------------------
// Initial connection
// -----------------------------------
useEffect(() => {
if (!ddo?.chainId) return
const config = {
...getOceanConfig('mainnet'),
...getOceanConfig(ddo.chainId),
// add local dev values
...(networkId === 8996 && {
...(ddo.chainId === 8996 && {
...getDevelopmentConfig()
})
}
@ -130,39 +77,28 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
await connect(config)
}
init()
// init periodic refresh of wallet balance
// const balanceInterval = setInterval(() => refreshBalance(), refreshInterval)
// return () => {
// clearInterval(balanceInterval)
// }
}, [connect, networkId])
}, [connect, ddo?.chainId])
// -----------------------------------
// Get user info, handle account change from web3
// -----------------------------------
// useEffect(() => {
// if (!ocean || !accountId || !web3) return
useEffect(() => {
if (!ocean || !accountId || !web3) return
// async function getInfo() {
// const { account, balance } = await getUserInfo(ocean)
// setAccount(account)
// setBalance(balance)
// }
// getInfo()
// }, [ocean, accountId, web3])
async function getInfo() {
const account = (await ocean.accounts.list())[0]
Logger.log('[ocean] Account: ', account)
setAccount(account)
}
getInfo()
}, [ocean, accountId, web3])
return (
<OceanContext.Provider
value={
{
oceanConfigs,
metadataCacheUri,
ocean,
account,
balance,
config,
connect
// refreshBalance
} as OceanProviderValue

48
src/providers/Web3.tsx
View File

@ -19,6 +19,8 @@ import {
getNetworkDisplayName
} from '../utils/web3'
import { graphql, useStaticQuery } from 'gatsby'
import { UserBalance } from '../@types/TokenBalance'
import { getOceanBalance } from '../utils/ocean'
interface Web3ProviderValue {
web3: Web3
@ -26,6 +28,7 @@ interface Web3ProviderValue {
web3Modal: Web3Modal
web3ProviderInfo: IProviderInfo
accountId: string
balance: UserBalance
networkId: number
networkDisplayName: string
networkData: EthereumListsChain
@ -77,6 +80,8 @@ export const web3ModalOpts = {
theme: web3ModalTheme
}
const refreshInterval = 20000 // 20 sec.
const networksQuery = graphql`
query {
allNetworksMetadataJson {
@ -115,7 +120,14 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
const [isTestnet, setIsTestnet] = useState<boolean>()
const [accountId, setAccountId] = useState<string>()
const [web3Loading, setWeb3Loading] = useState<boolean>(true)
const [balance, setBalance] = useState<UserBalance>({
eth: '0',
ocean: '0'
})
// -----------------------------------
// Helper: connect to web3
// -----------------------------------
const connect = useCallback(async () => {
if (!web3Modal) {
setWeb3Loading(false)
@ -146,6 +158,24 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
}
}, [web3Modal])
// -----------------------------------
// Helper: Get user balance
// -----------------------------------
const getUserBalance = useCallback(async () => {
if (!accountId || !networkId || !web3) return
try {
const balance = {
eth: web3.utils.fromWei(await web3.eth.getBalance(accountId, 'latest')),
ocean: await getOceanBalance(accountId, networkId, web3)
}
setBalance(balance)
Logger.log('[web3] Balance: ', balance)
} catch (error) {
Logger.error('[web3] Error: ', error.message)
}
}, [accountId, networkId, web3])
// -----------------------------------
// Create initial Web3Modal instance
// -----------------------------------
@ -180,6 +210,20 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
connectCached()
}, [connect, web3Modal])
// -----------------------------------
// Get and set user balance
// -----------------------------------
useEffect(() => {
getUserBalance()
// init periodic refresh of wallet balance
const balanceInterval = setInterval(() => getUserBalance(), refreshInterval)
return () => {
clearInterval(balanceInterval)
}
}, [getUserBalance])
// -----------------------------------
// Get and set network metadata
// -----------------------------------
@ -274,6 +318,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
web3Modal,
web3ProviderInfo,
accountId,
balance,
networkId,
networkDisplayName,
networkData,
@ -294,3 +339,6 @@ const useWeb3 = (): Web3ProviderValue => useContext(Web3Context)
export { Web3Provider, useWeb3, Web3ProviderValue, Web3Context }
export default Web3Provider
function getTokenBalance() {
throw new Error('Function not implemented.')
}

77
src/utils/ocean.ts
View File

@ -1,15 +1,13 @@
import {
Account,
Logger,
Ocean,
ConfigHelper,
ConfigHelperConfig,
ConfigHelperNetworkId,
ConfigHelperNetworkName
ConfigHelperNetworkName,
Logger
} from '@oceanprotocol/lib'
import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
import { UserBalance } from '../@types/TokenBalance'
import { AbiItem } from 'web3-utils/types'
import Web3 from 'web3'
export function getOceanConfig(
network: ConfigHelperNetworkName | ConfigHelperNetworkId
@ -24,11 +22,7 @@ export function getOceanConfig(
: process.env.GATSBY_INFURA_PROJECT_ID
)
return {
...config,
// TODO: remove faking one Aquarius for all networks
metadataCacheUri: 'https://aquarius.mainnet.oceanprotocol.com'
} as ConfigHelperConfig
return config as ConfigHelperConfig
}
export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {
@ -43,19 +37,54 @@ export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {
}
}
export async function getUserInfo(
ocean: Ocean
): Promise<{ account: Account; balance: UserBalance }> {
if (!ocean) return { account: null, balance: { eth: '0', ocean: '0' } }
const account = (await ocean.accounts.list())[0]
Logger.log('[ocean] Account: ', account)
const balance = {
eth: await account.getEtherBalance(),
ocean: await account.getOceanBalance()
export async function getOceanBalance(
accountId: string,
networkId: number,
web3: Web3
): Promise<string> {
const minABI = [
{
constant: true,
inputs: [
{
name: '_owner',
type: 'address'
}
Logger.log('[ocean] Balance: ', JSON.stringify(balance))
],
name: 'balanceOf',
outputs: [
{
name: 'balance',
type: 'uint256'
}
],
payable: false,
stateMutability: 'view',
type: 'function'
}
] as AbiItem[]
return { account, balance }
try {
const token = new web3.eth.Contract(
minABI,
getOceanConfig(networkId).oceanTokenAddress,
{ from: accountId }
)
const result = web3.utils.fromWei(
await token.methods.balanceOf(accountId).call()
)
return result
} catch (e) {
Logger.error(`ERROR: Failed to get the balance: ${e.message}`)
}
}
export function getOceanTokenData(
networkId: number,
configs: ConfigHelperConfig[]
): { address: string; symbol: string } {
const { oceanTokenSymbol, oceanTokenAddress } = configs.filter(
(config) => config.networkId === networkId
)[0]
return { address: oceanTokenAddress, symbol: oceanTokenSymbol }
}