© {year}
—{' '}
Terms
diff --git a/src/components/pages/History/ComputeJobs/index.tsx b/src/components/pages/History/ComputeJobs/index.tsx
index 1f9ab920c..f55a6fd69 100644
--- a/src/components/pages/History/ComputeJobs/index.tsx
+++ b/src/components/pages/History/ComputeJobs/index.tsx
@@ -8,14 +8,14 @@ import Dotdotdot from 'react-dotdotdot'
import Table from '../../../atoms/Table'
import Button from '../../../atoms/Button'
import { useOcean } from '../../../../providers/Ocean'
-import { gql, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
+import { ComputeOrders } from '../../../../@types/apollo/ComputeOrders'
import { useWeb3 } from '../../../../providers/Web3'
import {
queryMetadata,
transformChainIdsListToQuery
} from '../../../../utils/aquarius'
import axios, { CancelToken } from 'axios'
-import { ComputeOrders } from '../../../../@types/apollo/ComputeOrders'
import Details from './Details'
import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
@@ -117,17 +117,19 @@ export default function ComputeJobs(): ReactElement {
const [isLoading, setIsLoading] = useState(true)
const [jobs, setJobs] = useState
([])
const { chainIds } = useUserPreferences()
- const { data, refetch } = useQuery(getComputeOrders, {
+ const [result] = useQuery({
+ query: getComputeOrders,
variables: {
user: accountId?.toLowerCase()
}
})
+ const { data } = result
async function getJobs() {
if (!accountId) return
setIsLoading(true)
- await refetch()
+ // await refetch()
const dtList = []
const computeJobs: ComputeJobMetaData[] = []
for (let i = 0; i < data.tokenOrders.length; i++) {
diff --git a/src/components/pages/History/Downloads.tsx b/src/components/pages/History/Downloads.tsx
index c49467cdd..d13c06c84 100644
--- a/src/components/pages/History/Downloads.tsx
+++ b/src/components/pages/History/Downloads.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement, useEffect, useState } from 'react'
import Table from '../../atoms/Table'
-import { gql, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
import Time from '../../atoms/Time'
import web3 from 'web3'
import AssetTitle from '../../molecules/AssetListTitle'
@@ -58,9 +58,11 @@ export default function ComputeDownloads(): ReactElement {
const { accountId } = useWeb3()
const [isLoading, setIsLoading] = useState(false)
const [orders, setOrders] = useState()
- const { data } = useQuery(getTokenOrders, {
+ const [result] = useQuery({
+ query: getTokenOrders,
variables: { user: accountId?.toLowerCase() }
})
+ const { data } = result
const { appConfig } = useSiteMetadata()
useEffect(() => {
diff --git a/src/components/pages/History/PoolShares.tsx b/src/components/pages/History/PoolShares.tsx
index f34f2ac27..33c290db4 100644
--- a/src/components/pages/History/PoolShares.tsx
+++ b/src/components/pages/History/PoolShares.tsx
@@ -3,7 +3,7 @@ import Table from '../../atoms/Table'
import Conversion from '../../atoms/Price/Conversion'
import styles from './PoolShares.module.css'
import AssetTitle from '../../molecules/AssetListTitle'
-import { gql, useQuery } from '@apollo/client'
+import { gql, useQuery } from 'urql'
import {
PoolShares as PoolSharesList,
PoolShares_poolShares as PoolShare,
@@ -141,13 +141,15 @@ const columns = [
export default function PoolShares(): ReactElement {
const { accountId } = useWeb3()
const [assets, setAssets] = useState()
- const { data, loading } = useQuery(poolSharesQuery, {
+
+ const [result] = useQuery({
+ query: poolSharesQuery,
variables: {
user: accountId?.toLowerCase()
- },
- pollInterval: 20000
+ }
+ // pollInterval: 20000
})
-
+ const { data, fetching } = result
useEffect(() => {
if (!data) return
const assetList: Asset[] = []
@@ -159,7 +161,7 @@ export default function PoolShares(): ReactElement {
})
})
setAssets(assetList)
- }, [data, loading])
+ }, [data, fetching])
return (
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 3c9204251..401b1eae8 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -23,12 +23,12 @@ import { useUserPreferences } from '../../providers/UserPreferences'
async function getQueryHighest(
chainIds: number[]
): Promise<[SearchQuery, string]> {
- const dids = await getHighestLiquidityDIDs()
+ const dids = await getHighestLiquidityDIDs(chainIds)
// TODO: this query needs to adapt to chainIds
const queryHighest = {
page: 1,
- offset: 15,
+ offset: 9,
query: {
query_string: {
query: `(${dids}) AND (${transformChainIdsListToQuery(
diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx
index 46e44b98e..6fe5c5774 100644
--- a/src/helpers/wrapRootElement.tsx
+++ b/src/helpers/wrapRootElement.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
import Web3Provider from '../providers/Web3'
import { UserPreferencesProvider } from '../providers/UserPreferences'
import PricesProvider from '../providers/Prices'
-import ApolloClientProvider from '../providers/ApolloClientProvider'
+import UrqlProvider from '../providers/UrqlProvider'
export default function wrapRootElement({
element
@@ -11,11 +11,11 @@ export default function wrapRootElement({
}): ReactElement {
return (
-
+
{element}
-
+
)
}
diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx
deleted file mode 100644
index e26f3e58c..000000000
--- a/src/providers/ApolloClientProvider.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
- ApolloClient,
- ApolloProvider,
- HttpLink,
- InMemoryCache,
- NormalizedCacheObject
-} from '@apollo/client'
-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
-
-function createClient(subgraphUri: string) {
- const client = new ApolloClient({
- link: new HttpLink({
- uri: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`,
- fetch
- }),
- cache: new InMemoryCache()
- })
-
- return client
-}
-
-export function getApolloClientInstance(): ApolloClient {
- return apolloClient
-}
-
-export default function ApolloClientProvider({
- children
-}: {
- children: ReactNode
-}): ReactElement {
- const { networkId } = useWeb3()
- const [client, setClient] = useState>()
-
- useEffect(() => {
- const oceanConfig = getOceanConfig(networkId || 1)
-
- if (!oceanConfig?.subgraphUri) {
- Logger.error(
- 'No subgraphUri defined, preventing ApolloProvider from initialization.'
- )
- return
- }
-
- const newClient = createClient(oceanConfig.subgraphUri)
- apolloClient = newClient
- setClient(newClient)
- Logger.log(`[apollo] Client connected to ${oceanConfig.subgraphUri}`)
- }, [networkId])
-
- return client ? (
- {children}
- ) : (
- <>
- )
-}
-
-export { ApolloClientProvider }
diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx
index b7590b8f0..bfa54b1fa 100644
--- a/src/providers/Asset.tsx
+++ b/src/providers/Asset.tsx
@@ -20,7 +20,7 @@ import { useSiteMetadata } from '../hooks/useSiteMetadata'
interface AssetProviderValue {
isInPurgatory: boolean
purgatoryData: PurgatoryData
- ddo: any
+ ddo: DDO
did: string
metadata: MetadataMarket
title: string
@@ -121,7 +121,7 @@ function AssetProvider({
}
}, [])
- const initMetadata = useCallback(async (ddo: any): Promise => {
+ const initMetadata = useCallback(async (ddo: DDO): Promise => {
if (!ddo) return
setLoading(true)
const returnedPrice = await getPrice(ddo)
diff --git a/src/providers/UrqlProvider.tsx b/src/providers/UrqlProvider.tsx
new file mode 100644
index 000000000..40129be4d
--- /dev/null
+++ b/src/providers/UrqlProvider.tsx
@@ -0,0 +1,46 @@
+import { createClient, Provider, Client } from 'urql'
+import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
+import { useWeb3 } from './Web3'
+import { Logger } from '@oceanprotocol/lib'
+import { getOceanConfig } from '../utils/ocean'
+
+let urqlClient: Client
+
+function createUrqlClient(subgraphUri: string) {
+ const client = createClient({
+ url: `${subgraphUri}/subgraphs/name/oceanprotocol/ocean-subgraph`
+ })
+ return client
+}
+
+export function getUrqlClientInstance(): Client {
+ return urqlClient
+}
+
+export default function UrqlClientProvider({
+ children
+}: {
+ children: ReactNode
+}): ReactElement {
+ const { networkId } = useWeb3()
+ const [client, setClient] = useState()
+
+ useEffect(() => {
+ const oceanConfig = getOceanConfig(networkId || 1)
+
+ if (!oceanConfig?.subgraphUri) {
+ Logger.error(
+ 'No subgraphUri defined, preventing UrqlProvider from initialization.'
+ )
+ return
+ }
+
+ const newClient = createUrqlClient(oceanConfig.subgraphUri)
+ urqlClient = newClient
+ setClient(newClient)
+ Logger.log(`[URQL] Client connected to ${oceanConfig.subgraphUri}`)
+ }, [networkId])
+
+ return client ? {children} : <>
+}
+export { UrqlClientProvider }
diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 115f8c432..5c68dc685 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -1,6 +1,8 @@
-import { gql, DocumentNode, ApolloQueryResult } from '@apollo/client'
+import { gql, OperationResult, TypedDocumentNode, OperationContext } from 'urql'
import { DDO, BestPrice } from '@oceanprotocol/lib'
-import { getApolloClientInstance } from '../providers/ApolloClientProvider'
+import { getUrqlClientInstance } from '../providers/UrqlProvider'
+import { getOceanConfig } from './ocean'
+import web3 from 'web3'
import {
AssetsPoolPrice,
AssetsPoolPrice_pools as AssetsPoolPricePools
@@ -9,12 +11,11 @@ import {
AssetsFrePrice,
AssetsFrePrice_fixedRateExchanges as AssetsFrePriceFixedRateExchanges
} from '../@types/apollo/AssetsFrePrice'
-import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder'
import {
AssetsFreePrice,
AssetsFreePrice_dispensers as AssetFreePriceDispenser
} from '../@types/apollo/AssetsFreePrice'
-import web3 from 'web3'
+import { AssetPreviousOrder } from '../@types/apollo/AssetPreviousOrder'
export interface PriceList {
[key: string]: string
@@ -135,17 +136,19 @@ const HighestLiquidityAssets = gql`
}
`
+function getSubgrahUri(chainId: number): string {
+ const config = getOceanConfig(chainId)
+ return config.subgraphUri
+}
+
async function fetchData(
- query: DocumentNode,
- variables: any
-): Promise> {
+ query: TypedDocumentNode,
+ variables: any,
+ context: OperationContext
+): Promise {
try {
- const client = getApolloClientInstance()
- const response = await client.query({
- query: query,
- variables: variables,
- fetchPolicy: 'no-cache'
- })
+ const client = getUrqlClientInstance()
+ const response = await client.query(query, variables, context).toPromise()
return response
} catch (error) {
console.error('Error fetchData: ', error.message)
@@ -161,8 +164,8 @@ export async function getPreviousOrders(
id: id,
account: account
}
- const fetchedPreviousOrders: ApolloQueryResult =
- await fetchData(PreviousOrderQuery, variables)
+ const fetchedPreviousOrders: OperationResult =
+ await fetchData(PreviousOrderQuery, variables, null)
if (fetchedPreviousOrders.data?.tokenOrders?.length === 0) return null
if (assetTimeout === '0') {
return fetchedPreviousOrders?.data?.tokenOrders[0]?.tx
@@ -242,44 +245,67 @@ async function getAssetsPoolsExchangesAndDatatokenMap(
assets: DDO[]
): Promise<
[
- ApolloQueryResult,
- ApolloQueryResult,
- ApolloQueryResult,
+ AssetsPoolPricePools[],
+ AssetsFrePriceFixedRateExchanges[],
+ AssetFreePriceDispenser[],
DidAndDatatokenMap
]
> {
const didDTMap: DidAndDatatokenMap = {}
- const dataTokenList: string[] = []
+ const chainAssetLists: any = {}
for (const ddo of assets) {
didDTMap[ddo?.dataToken.toLowerCase()] = ddo.id
- dataTokenList.push(ddo?.dataToken.toLowerCase())
+ // harcoded until we have chainId on assets
+ if (chainAssetLists[ddo.chainId]) {
+ chainAssetLists[ddo.chainId].push(ddo?.dataToken.toLowerCase())
+ } else {
+ chainAssetLists[ddo.chainId] = []
+ chainAssetLists[ddo.chainId].push(ddo?.dataToken.toLowerCase())
+ }
}
- const freVariables = {
- datatoken_in: dataTokenList
+ let poolPriceResponse: AssetsPoolPricePools[] = []
+ let frePriceResponse: AssetsFrePriceFixedRateExchanges[] = []
+ let freePriceResponse: AssetFreePriceDispenser[] = []
+
+ for (const chainKey in chainAssetLists) {
+ const freVariables = {
+ datatoken_in: chainAssetLists[chainKey]
+ }
+ const poolVariables = {
+ datatokenAddress_in: chainAssetLists[chainKey]
+ }
+ const freeVariables = {
+ datatoken_in: chainAssetLists[chainKey]
+ }
+
+ const queryContext: OperationContext = {
+ url: `${getSubgrahUri(
+ Number(chainKey)
+ )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+ requestPolicy: 'network-only'
+ }
+
+ const chainPoolPriceResponse: OperationResult =
+ await fetchData(PoolQuery, poolVariables, queryContext)
+
+ poolPriceResponse = poolPriceResponse.concat(
+ chainPoolPriceResponse.data.pools
+ )
+ const chainFrePriceResponse: OperationResult =
+ await fetchData(FreQuery, freVariables, queryContext)
+
+ frePriceResponse = frePriceResponse.concat(
+ chainFrePriceResponse.data.fixedRateExchanges
+ )
+
+ const chainFreePriceResponse: OperationResult =
+ await fetchData(FreeQuery, freeVariables, queryContext)
+
+ freePriceResponse = freePriceResponse.concat(
+ chainFreePriceResponse.data.dispensers
+ )
}
- const poolVariables = {
- datatokenAddress_in: dataTokenList
- }
-
- const freeVariables = {
- datatoken_in: dataTokenList
- }
-
- const poolPriceResponse: ApolloQueryResult = await fetchData(
- PoolQuery,
- poolVariables
- )
- const frePriceResponse: ApolloQueryResult = await fetchData(
- FreQuery,
- freVariables
- )
-
- const freePriceResponse: ApolloQueryResult = await fetchData(
- FreeQuery,
- freeVariables
- )
-
return [poolPriceResponse, frePriceResponse, freePriceResponse, didDTMap]
}
@@ -287,9 +313,9 @@ export async function getAssetsPriceList(assets: DDO[]): Promise {
const priceList: PriceList = {}
const values: [
- ApolloQueryResult,
- ApolloQueryResult,
- ApolloQueryResult,
+ AssetsPoolPricePools[],
+ AssetsFrePriceFixedRateExchanges[],
+ AssetFreePriceDispenser[],
DidAndDatatokenMap
] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
const poolPriceResponse = values[0]
@@ -297,16 +323,16 @@ export async function getAssetsPriceList(assets: DDO[]): Promise {
const freePriceResponse = values[2]
const didDTMap: DidAndDatatokenMap = values[3]
- for (const poolPrice of poolPriceResponse.data?.pools) {
+ for (const poolPrice of poolPriceResponse) {
priceList[didDTMap[poolPrice.datatokenAddress]] =
poolPrice.consumePrice === '-1'
? poolPrice.spotPrice
: poolPrice.consumePrice
}
- for (const frePrice of frePriceResponse.data?.fixedRateExchanges) {
+ for (const frePrice of frePriceResponse) {
priceList[didDTMap[frePrice.datatoken?.address]] = frePrice.rate
}
- for (const freePrice of freePriceResponse.data?.dispensers) {
+ for (const freePrice of freePriceResponse) {
priceList[didDTMap[freePrice.datatoken?.address]] = '0'
}
return priceList
@@ -316,26 +342,33 @@ export async function getPrice(asset: DDO): Promise {
const freVariables = {
datatoken: asset?.dataToken.toLowerCase()
}
-
+ const freeVariables = {
+ datatoken: asset?.dataToken.toLowerCase()
+ }
const poolVariables = {
datatokenAddress: asset?.dataToken.toLowerCase()
}
- const freeVariables = {
- datatoken: asset?.dataToken.toLowerCase()
+ const queryContext: OperationContext = {
+ url: `${getSubgrahUri(
+ asset.chainId
+ )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+ requestPolicy: 'network-only'
}
-
- const poolPriceResponse: ApolloQueryResult = await fetchData(
+ const poolPriceResponse: OperationResult = await fetchData(
AssetPoolPriceQuerry,
- poolVariables
+ poolVariables,
+ queryContext
)
- const frePriceResponse: ApolloQueryResult = await fetchData(
+ const frePriceResponse: OperationResult = await fetchData(
AssetFreQuery,
- freVariables
+ freVariables,
+ queryContext
)
- const freePriceResponse: ApolloQueryResult = await fetchData(
+ const freePriceResponse: OperationResult = await fetchData(
AssetFreeQuery,
- freeVariables
+ freeVariables,
+ queryContext
)
const bestPrice: BestPrice = transformPriceToBestPrice(
@@ -353,29 +386,29 @@ export async function getAssetsBestPrices(
const assetsWithPrice: AssetListPrices[] = []
const values: [
- ApolloQueryResult,
- ApolloQueryResult,
- ApolloQueryResult,
+ AssetsPoolPricePools[],
+ AssetsFrePriceFixedRateExchanges[],
+ AssetFreePriceDispenser[],
DidAndDatatokenMap
] = await getAssetsPoolsExchangesAndDatatokenMap(assets)
+
const poolPriceResponse = values[0]
const frePriceResponse = values[1]
const freePriceResponse = values[2]
-
for (const ddo of assets) {
const dataToken = ddo.dataToken.toLowerCase()
const poolPrice: AssetsPoolPricePools[] = []
const frePrice: AssetsFrePriceFixedRateExchanges[] = []
const freePrice: AssetFreePriceDispenser[] = []
- const pool = poolPriceResponse.data?.pools.find(
+ const pool = poolPriceResponse.find(
(pool: any) => pool.datatokenAddress === dataToken
)
pool && poolPrice.push(pool)
- const fre = frePriceResponse.data?.fixedRateExchanges.find(
+ const fre = frePriceResponse.find(
(fre: any) => fre.datatoken.address === dataToken
)
fre && frePrice.push(fre)
- const free = freePriceResponse.data?.dispensers.find(
+ const free = freePriceResponse.find(
(free: any) => free.datatoken.address === dataToken
)
free && freePrice.push(free)
@@ -389,16 +422,30 @@ export async function getAssetsBestPrices(
return assetsWithPrice
}
-export async function getHighestLiquidityDIDs(): Promise {
+export async function getHighestLiquidityDIDs(
+ chainIds: number[]
+): Promise {
const didList: string[] = []
- const fetchedPools = await fetchData(HighestLiquidityAssets, null)
- if (fetchedPools.data?.pools?.length === 0) return null
- for (let i = 0; i < fetchedPools.data.pools.length; i++) {
- if (!fetchedPools.data.pools[i].datatokenAddress) continue
- const did = web3.utils
- .toChecksumAddress(fetchedPools.data.pools[i].datatokenAddress)
- .replace('0x', 'did:op:')
- didList.push(did)
+ for (const chain of chainIds) {
+ const queryContext: OperationContext = {
+ url: `${getSubgrahUri(
+ Number(chain)
+ )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+ requestPolicy: 'network-only'
+ }
+ const fetchedPools = await fetchData(
+ HighestLiquidityAssets,
+ null,
+ queryContext
+ )
+ if (fetchedPools.data?.pools?.length === 0) return null
+ for (let i = 0; i < fetchedPools.data.pools.length; i++) {
+ if (!fetchedPools.data.pools[i].datatokenAddress) continue
+ const did = web3.utils
+ .toChecksumAddress(fetchedPools.data.pools[i].datatokenAddress)
+ .replace('0x', 'did:op:')
+ didList.push(did)
+ }
}
const searchDids = JSON.stringify(didList)
.replace(/,/g, ' ')