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

Adapt subgraph url queries in pool tab for multinetwork (#740)

* updated pool history and pool liquidity graph queries

* fixed lint errors

* fixed graph issues

* refatch graph every 10s

* refetch liquidity info and fixed typo's

* cleared refetch intervals when unmounting pool and graph compoments on  assets detail page
This commit is contained in:
Bogdan Fazakas 2021-07-22 14:02:32 +03:00 committed by GitHub
parent 22da62b231
commit fddd5ff144
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 151 additions and 66 deletions

View File

@ -17,8 +17,9 @@ import { darkModeConfig } from '../../../../../app.config'
import Button from '../../../atoms/Button'
import { Logger } from '@oceanprotocol/lib'
import { useAsset } from '../../../../providers/Asset'
import { gql, useQuery } from 'urql'
import { gql, OperationContext, OperationResult } from 'urql'
import { PoolHistory } from '../../../../@types/apollo/PoolHistory'
import { getSubgrahUri, fetchData } from '../../../../utils/subgraph'
declare type GraphType = 'liquidity' | 'price'
@ -27,6 +28,8 @@ defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystem
'Segoe UI', Helvetica, Arial, sans-serif`
defaults.global.animation = { easing: 'easeInOutQuart', duration: 1000 }
const REFETCH_INTERVAL = 10000
const lineStyle: Partial<ChartDataSets> = {
fill: false,
lineTension: 0.1,
@ -121,24 +124,58 @@ export default function Graph(): ReactElement {
const [options, setOptions] = useState<ChartOptions>()
const [graphType, setGraphType] = useState<GraphType>('liquidity')
const { price } = useAsset()
const { price, ddo } = useAsset()
const [lastBlock, setLastBlock] = useState<number>(0)
const [priceHistory, setPriceHistory] = useState([])
const [error, setError] = useState<Error>()
const [liquidityHistory, setLiquidityHistory] = useState([])
const [timestamps, setTimestamps] = useState([])
const [isLoading, setIsLoading] = useState(true)
const [dataHistory, setDataHistory] = useState<PoolHistory>()
const [graphData, setGraphData] = useState<ChartData>()
const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>()
const [result, refetch] = useQuery<PoolHistory>({
query: poolHistory,
variables: {
id: price.address.toLowerCase(),
block: lastBlock
async function getPoolHistory() {
try {
const queryContext: OperationContext = {
url: `${getSubgrahUri(
Number(ddo.chainId)
)}/subgraphs/name/oceanprotocol/ocean-subgraph`,
requestPolicy: 'network-only'
}
const queryVariables = {
id: price.address.toLowerCase(),
block: lastBlock
}
const queryResult: OperationResult<PoolHistory> = await fetchData(
poolHistory,
queryVariables,
queryContext
)
setDataHistory(queryResult?.data)
} catch (error) {
console.error('Error fetchData: ', error.message)
setError(error)
}
// pollInterval: 20000
})
const { data, error } = result
}
function refetchGraph() {
if (!graphFetchInterval) {
setGraphFetchInterval(
setInterval(function () {
getPoolHistory()
}, REFETCH_INTERVAL)
)
}
}
useEffect(() => {
return () => {
clearInterval(graphFetchInterval)
}
}, [graphFetchInterval])
useEffect(() => {
Logger.log('Fired GraphOptions!')
@ -147,59 +184,70 @@ export default function Graph(): ReactElement {
}, [locale, darkMode.value])
useEffect(() => {
if (!data) return
Logger.log('Fired GraphData!')
getPoolHistory()
}, [lastBlock])
const latestTimestamps = [
...timestamps,
...data.poolTransactions.map((item) => {
const date = new Date(item.timestamp * 1000)
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
})
]
setTimestamps(latestTimestamps)
useEffect(() => {
async function init() {
const data: PoolHistory = dataHistory
if (!data) {
await getPoolHistory()
return
}
Logger.log('Fired GraphData!')
const latestLiquidtyHistory = [
...liquidityHistory,
...data.poolTransactions.map((item) => item.oceanReserve)
]
const latestTimestamps = [
...timestamps,
...data.poolTransactions.map((item) => {
const date = new Date(item.timestamp * 1000)
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
})
]
setTimestamps(latestTimestamps)
setLiquidityHistory(latestLiquidtyHistory)
const latestLiquidtyHistory = [
...liquidityHistory,
...data.poolTransactions.map((item) => item.oceanReserve)
]
const latestPriceHistory = [
...priceHistory,
...data.poolTransactions.map((item) => item.spotPrice)
]
setLiquidityHistory(latestLiquidtyHistory)
setPriceHistory(latestPriceHistory)
const latestPriceHistory = [
...priceHistory,
...data.poolTransactions.map((item) => item.spotPrice)
]
if (data.poolTransactions.length > 0) {
const newBlock =
data.poolTransactions[data.poolTransactions.length - 1].block
if (newBlock === lastBlock) return
setLastBlock(
data.poolTransactions[data.poolTransactions.length - 1].block
)
refetch()
} else {
setGraphData({
labels: latestTimestamps.slice(0),
datasets: [
{
...lineStyle,
label: 'Liquidity (OCEAN)',
data:
graphType === 'liquidity'
? latestLiquidtyHistory.slice(0)
: latestPriceHistory.slice(0),
borderColor: `#8b98a9`,
pointBackgroundColor: `#8b98a9`
}
]
})
setIsLoading(false)
setPriceHistory(latestPriceHistory)
if (data.poolTransactions.length > 0) {
const newBlock =
data.poolTransactions[data.poolTransactions.length - 1].block
if (newBlock === lastBlock) return
setLastBlock(
data.poolTransactions[data.poolTransactions.length - 1].block
)
} else {
setGraphData({
labels: latestTimestamps.slice(0),
datasets: [
{
...lineStyle,
label: 'Liquidity (OCEAN)',
data:
graphType === 'liquidity'
? latestLiquidtyHistory.slice(0)
: latestPriceHistory.slice(0),
borderColor: `#8b98a9`,
pointBackgroundColor: `#8b98a9`
}
]
})
setIsLoading(false)
refetchGraph()
}
}
}, [data, graphType])
init()
}, [dataHistory, graphType])
function handleGraphTypeSwitch(e: ChangeEvent<HTMLButtonElement>) {
e.preventDefault()

View File

@ -15,10 +15,13 @@ import { PoolBalance } from '../../../../@types/TokenBalance'
import Transactions from './Transactions'
import Graph from './Graph'
import { useAsset } from '../../../../providers/Asset'
import { gql, useQuery } from 'urql'
import { gql, OperationResult, OperationContext } from 'urql'
import { PoolLiquidity } from '../../../../@types/apollo/PoolLiquidity'
import { useOcean } from '../../../../providers/Ocean'
import { useWeb3 } from '../../../../providers/Web3'
import { getSubgrahUri, fetchData } from '../../../../utils/subgraph'
const REFETCH_INTERVAL = 5000
const contentQuery = graphql`
query PoolQuery {
@ -89,23 +92,55 @@ export default function Pool(): ReactElement {
const [creatorLiquidity, setCreatorLiquidity] = useState<PoolBalance>()
const [creatorPoolTokens, setCreatorPoolTokens] = useState<string>()
const [creatorPoolShare, setCreatorPoolShare] = useState<string>()
const [dataLiquidity, setdataLiquidity] = useState<PoolLiquidity>()
const [liquidityFetchInterval, setLiquidityFetchInterval] =
useState<NodeJS.Timeout>()
// the purpose of the value is just to trigger the effect
const [refreshPool, setRefreshPool] = useState(false)
const [result] = useQuery<PoolLiquidity>({
query: poolLiquidityQuery,
variables: {
async function getPoolLiquidity() {
const queryContext: OperationContext = {
url: `${getSubgrahUri(
Number(ddo.chainId)
)}/subgraphs/name/oceanprotocol/ocean-subgraph`,
requestPolicy: 'network-only'
}
const queryVariables = {
id: price.address.toLowerCase(),
shareId: `${price.address.toLowerCase()}-${ddo.publicKey[0].owner.toLowerCase()}`
}
// pollInterval: 5000
})
const { data: dataLiquidity } = result
const queryResult: OperationResult<PoolLiquidity> = await fetchData(
poolLiquidityQuery,
queryVariables,
queryContext
)
setdataLiquidity(queryResult?.data)
}
function refetchLiquidity() {
if (!liquidityFetchInterval) {
setLiquidityFetchInterval(
setInterval(function () {
getPoolLiquidity()
}, REFETCH_INTERVAL)
)
}
}
useEffect(() => {
return () => {
clearInterval(liquidityFetchInterval)
}
}, [liquidityFetchInterval])
useEffect(() => {
async function init() {
if (!dataLiquidity || !dataLiquidity.pool) return
if (!dataLiquidity || !dataLiquidity.pool) {
await getPoolLiquidity()
return
}
// Total pool shares
const totalPoolTokens = dataLiquidity.pool.totalShares
@ -153,6 +188,7 @@ export default function Pool(): ReactElement {
creatorLiquidity &&
((Number(creatorPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
setCreatorPoolShare(creatorPoolShare)
refetchLiquidity()
}
init()
}, [dataLiquidity, ddo.dataToken, price.datatoken, price.ocean, price?.value])

View File

@ -141,12 +141,12 @@ const HighestLiquidityAssets = gql`
}
`
function getSubgrahUri(chainId: number): string {
export function getSubgrahUri(chainId: number): string {
const config = getOceanConfig(chainId)
return config.subgraphUri
}
async function fetchData(
export async function fetchData(
query: TypedDocumentNode,
variables: any,
context: OperationContext
@ -157,6 +157,7 @@ async function fetchData(
return response
} catch (error) {
console.error('Error fetchData: ', error.message)
throw Error(error.message)
}
}