-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* get pools data from graph * TVL displayed * ESlint fixes * Code style fixed on App.tsx * footer stats display changes * ApolloProvider wrapping * config subgraphUri verified * pool number taken from graph * Apollo provider fix * Pools number set fixed * deleted unused imports * fix fetch, gatsby build Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove apollo client redundant init Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix prop Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * update pool count Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * tooltip added * small development config refactor * make sure initial config is actually overwritten with local addresses * log error on missing subgraphUri * copy change Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro> Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
- Loading branch information
4 people
authored
Feb 11, 2021
1 parent
b043eab
commit 9991b6d
Showing
7 changed files
with
131 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,47 @@ | ||
| import { Logger } from '@oceanprotocol/lib' | ||
| import React, { ReactElement, useEffect, useState } from 'react' | ||
| import PriceUnit from '../atoms/Price/PriceUnit' | ||
| import axios from 'axios' | ||
| import styles from './MarketStats.module.css' | ||
| import { useInView } from 'react-intersection-observer' | ||
|
|
||
| interface MarketStatsResponse { | ||
| datasets: { | ||
| pools: number | ||
| exchanges: number | ||
| none: number | ||
| total: number | ||
| import { gql, useQuery } from '@apollo/client' | ||
| import Conversion from '../atoms/Price/Conversion' | ||
| import PriceUnit from '../atoms/Price/PriceUnit' | ||
| import Tooltip from '../atoms/Tooltip' | ||
|
|
||
| const getTotalPoolsValues = gql` | ||
| query PoolsData { | ||
| poolFactories { | ||
| totalValueLocked | ||
| totalOceanLiquidity | ||
| finalizedPoolCount | ||
| } | ||
| } | ||
| owners: number | ||
| ocean: number | ||
| datatoken: number | ||
| } | ||
|
|
||
| const refreshInterval = 60000 // 60 sec. | ||
| ` | ||
|
|
||
| export default function MarketStats(): ReactElement { | ||
| const [ref, inView] = useInView() | ||
| const [stats, setStats] = useState<MarketStatsResponse>() | ||
| const [totalValueLocked, setTotalValueLocked] = useState<string>() | ||
| const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<string>() | ||
| const [poolCount, setPoolCount] = useState<number>() | ||
| const { data } = useQuery(getTotalPoolsValues) | ||
|
|
||
| useEffect(() => { | ||
| const source = axios.CancelToken.source() | ||
| if (!data) return | ||
|
|
||
| async function getStats() { | ||
| try { | ||
| const response = await axios('https://market-stats.oceanprotocol.com', { | ||
| cancelToken: source.token | ||
| }) | ||
| if (!response || response.status !== 200) return | ||
| setStats(response.data) | ||
| } catch (error) { | ||
| if (axios.isCancel(error)) { | ||
| Logger.log(error.message) | ||
| } else { | ||
| Logger.error(error.message) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Update periodically when in viewport | ||
| const interval = setInterval(getStats, refreshInterval) | ||
|
|
||
| if (!inView) { | ||
| clearInterval(interval) | ||
| } | ||
|
|
||
| getStats() | ||
|
|
||
| return () => { | ||
| clearInterval(interval) | ||
| source.cancel() | ||
| } | ||
| }, [inView]) | ||
| setTotalValueLocked(data.poolFactories[0].totalValueLocked) | ||
| setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) | ||
| setPoolCount(data.poolFactories[0].finalizedPoolCount) | ||
| }, [data]) | ||
|
|
||
| return ( | ||
| <div className={styles.stats} ref={ref}> | ||
| Total of <strong>{stats?.datasets.total}</strong> data sets & unique | ||
| datatokens published by <strong>{stats?.owners}</strong> accounts. | ||
| <br /> | ||
| <PriceUnit | ||
| price={`${stats?.ocean}`} | ||
| small | ||
| className={styles.total} | ||
| conversion | ||
| />{' '} | ||
| and{' '} | ||
| <PriceUnit | ||
| price={`${stats?.datatoken}`} | ||
| symbol="datatokens" | ||
| small | ||
| className={styles.total} | ||
| />{' '} | ||
| in <strong>{stats?.datasets.pools}</strong> data set pools. | ||
| <br /> | ||
| <strong>{stats?.datasets.none}</strong> data sets have no price set yet. | ||
| <div className={styles.stats}> | ||
| <Conversion price={`${totalValueLocked}`} hideApproximateSymbol />{' '} | ||
| <abbr title="Total Value Locked">TVL</abbr> across{' '} | ||
| <strong>{poolCount}</strong> data set pools that contain{' '} | ||
| <PriceUnit price={totalOceanLiquidity} small className={styles.total} />, | ||
| plus datatokens for each pool. | ||
| <Tooltip | ||
| className={styles.info} | ||
| content="Counted on-chain from our pool factory. Does not filter out data sets in " | ||
| reference="list-purgatory" | ||
| link="https://github.com/oceanprotocol/list-purgatory" | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { | ||
| ApolloClient, | ||
| ApolloProvider, | ||
| HttpLink, | ||
| InMemoryCache, | ||
| NormalizedCacheObject | ||
| } from '@apollo/client' | ||
| import { Logger } from '@oceanprotocol/lib' | ||
| import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' | ||
| import { useOcean } from '@oceanprotocol/react' | ||
| import fetch from 'cross-fetch' | ||
| import React, { useState, useEffect, ReactNode, ReactElement } from 'react' | ||
|
|
||
| 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 default function ApolloClientProvider({ | ||
| children | ||
| }: { | ||
| children: ReactNode | ||
| }): ReactElement { | ||
| const { config } = useOcean() | ||
| const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>() | ||
|
|
||
| useEffect(() => { | ||
| if (!(config as ConfigHelperConfig)?.subgraphUri) { | ||
| Logger.error( | ||
| 'No subgraphUri defined, preventing ApolloProvider from initialization.' | ||
| ) | ||
| return | ||
| } | ||
|
|
||
| const newClient = createClient((config as ConfigHelperConfig).subgraphUri) | ||
| setClient(newClient) | ||
| }, [config]) | ||
|
|
||
| return client ? ( | ||
| <ApolloProvider client={client}>{children}</ApolloProvider> | ||
| ) : ( | ||
| <></> | ||
| ) | ||
| } | ||
|
|
||
| export { ApolloClientProvider } |
9991b6dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: