From 8b7dd3ca5c8637329ddfa2c4f4e62d9f91f79953 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 27 Jan 2021 11:35:22 +0200 Subject: [PATCH 01/19] get pools data from graph --- src/components/App.tsx | 33 ++++++++++++------------ src/components/molecules/MarketStats.tsx | 21 +++++++++++++++ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 830a679e72..3660f0a8f5 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -65,28 +65,29 @@ export default function App({ }, [config]) return ( -
-
- {(props as PageProps).uri === '/' && ( - - )} - {isAccountInPurgatory && ( - - )} - {client ? ( + {client ? ( +
+
+ {(props as PageProps).uri === '/' && ( + + )} + {isAccountInPurgatory && ( + + )}
{children}
+
+
) : ( <> )} -
-
+ ) } diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index cadbbb13db..f7ed985982 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -4,6 +4,7 @@ import PriceUnit from '../atoms/Price/PriceUnit' import axios from 'axios' import styles from './MarketStats.module.css' import { useInView } from 'react-intersection-observer' +import { gql, useQuery } from '@apollo/client' interface MarketStatsResponse { datasets: { @@ -19,10 +20,30 @@ interface MarketStatsResponse { const refreshInterval = 60000 // 60 sec. +const getPools = gql` + query PoolsData { + pools { + id + datatokenReserve + oceanReserve + spotPrice + lockedValue + } + } +` + export default function MarketStats(): ReactElement { const [ref, inView] = useInView() const [stats, setStats] = useState() + const { data } = useQuery(getPools) + console.log("DATA: ", data) + + useEffect(() => { + if (!data) return + console.log(data) + }, [data]) + useEffect(() => { const source = axios.CancelToken.source() From 1b797bddb0f15a7d4cccb5084422d09f72a8229e Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Thu, 28 Jan 2021 14:07:05 +0200 Subject: [PATCH 02/19] TVL displayed --- src/components/atoms/Price/Conversion.tsx | 6 ++- src/components/molecules/MarketStats.tsx | 45 ++++++++++------------- 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index cbab887b06..621b8caf11 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -9,10 +9,12 @@ const cx = classNames.bind(styles) export default function Conversion({ price, - className + className, + hideApproximationSign }: { price: string // expects price in OCEAN, not wei className?: string + hideApproximationSign?: boolean }): ReactElement { const { prices } = usePrices() const { currency, locale } = useUserPreferences() @@ -59,7 +61,7 @@ export default function Conversion({ className={styleClasses} title="Approximation based on current OCEAN spot price on Coingecko" > - ≈ {' '} + {hideApproximationSign ? <> : <> ≈ } {' '} {!isFiat && currency} ) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index f7ed985982..0322dbc305 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -5,6 +5,8 @@ import axios from 'axios' import styles from './MarketStats.module.css' import { useInView } from 'react-intersection-observer' import { gql, useQuery } from '@apollo/client' +import { setNestedObjectValues } from 'formik' +import Conversion from '../atoms/Price/Conversion' interface MarketStatsResponse { datasets: { @@ -20,28 +22,29 @@ interface MarketStatsResponse { const refreshInterval = 60000 // 60 sec. -const getPools = gql` +const getTotalPoolsValues = gql` query PoolsData { - pools { - id - datatokenReserve - oceanReserve - spotPrice - lockedValue - } + poolFactories { + totalLockedValue + totalLiquidity + totalSwapVolume + totalSwapFee + poolCount + finalizedPoolCount + } } ` export default function MarketStats(): ReactElement { const [ref, inView] = useInView() const [stats, setStats] = useState() + const [totalLockedValue, setTotalLockedValue] = useState() - const { data } = useQuery(getPools) - console.log("DATA: ", data) + const { data } = useQuery(getTotalPoolsValues) useEffect(() => { if (!data) return - console.log(data) + setTotalLockedValue(data.poolFactories[0].totalLockedValue) }, [data]) useEffect(() => { @@ -83,20 +86,12 @@ export default function MarketStats(): ReactElement { Total of {stats?.datasets.total} data sets & unique datatokens published by {stats?.owners} accounts.
- {' '} - and{' '} - {' '} - in {stats?.datasets.pools} data set pools. + {' '} TVL (total value locked) across + {' '} + {stats?.datasets.pools} data set pools that contain {' '} and datatokens for each pool.
{stats?.datasets.none} data sets have no price set yet. From 2dd519c993091419584d795116da3020339eb144 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Thu, 28 Jan 2021 14:16:57 +0200 Subject: [PATCH 03/19] ESlint fixes --- src/components/atoms/Price/Conversion.tsx | 3 ++- src/components/molecules/MarketStats.tsx | 9 +++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 621b8caf11..6f53bb6710 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -61,7 +61,8 @@ export default function Conversion({ className={styleClasses} title="Approximation based on current OCEAN spot price on Coingecko" > - {hideApproximationSign ? <> : <> ≈ } {' '} + {hideApproximationSign ? <> : <> ≈ } + {' '} {!isFiat && currency} ) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 0322dbc305..be97593225 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -86,12 +86,9 @@ export default function MarketStats(): ReactElement { Total of {stats?.datasets.total} data sets & unique datatokens published by {stats?.owners} accounts.
- {' '} TVL (total value locked) across - {' '} - {stats?.datasets.pools} data set pools that contain {' '} and datatokens for each pool. + TVL + (total value locked) across {stats?.datasets.pools} data + set pools that contain and datatokens for each pool.
{stats?.datasets.none} data sets have no price set yet. From 86e33b6f68b70c3ef5310129209cf7ff499606de Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Thu, 28 Jan 2021 14:47:01 +0200 Subject: [PATCH 04/19] Code style fixed on App.tsx --- src/components/App.tsx | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 3660f0a8f5..1aec81da4c 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -66,28 +66,27 @@ export default function App({ return ( {client ? ( - -
+ +
{(props as PageProps).uri === '/' && ( - - )} - {isAccountInPurgatory && ( - - )} + + )} + {isAccountInPurgatory && ( + + )}
{children}
-
- - ) : ( - <> - )} - +
+ + ) : ( + <> + )} ) } From bccd907c8e284c59d7e66a6d7319e9fd930afd91 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Mon, 1 Feb 2021 17:09:13 +0200 Subject: [PATCH 05/19] footer stats display changes --- src/components/atoms/Price/Conversion.tsx | 2 +- src/components/molecules/MarketStats.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 6f53bb6710..ecbec61e51 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -61,7 +61,7 @@ export default function Conversion({ className={styleClasses} title="Approximation based on current OCEAN spot price on Coingecko" > - {hideApproximationSign ? <> : <> ≈ } + {!hideApproximationSign && '≈'} {' '} {!isFiat && currency} diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index be97593225..e9139f9282 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -26,7 +26,6 @@ const getTotalPoolsValues = gql` query PoolsData { poolFactories { totalLockedValue - totalLiquidity totalSwapVolume totalSwapFee poolCount @@ -38,7 +37,7 @@ const getTotalPoolsValues = gql` export default function MarketStats(): ReactElement { const [ref, inView] = useInView() const [stats, setStats] = useState() - const [totalLockedValue, setTotalLockedValue] = useState() + const [totalLockedValue, setTotalLockedValue] = useState() const { data } = useQuery(getTotalPoolsValues) @@ -86,9 +85,10 @@ export default function MarketStats(): ReactElement { Total of {stats?.datasets.total} data sets & unique datatokens published by {stats?.owners} accounts.
- TVL - (total value locked) across {stats?.datasets.pools} data - set pools that contain and datatokens for each pool. + {' '} + TVL (total value locked) across{' '} + {stats?.datasets.pools} data set pools that contain and + datatokens for each pool.
{stats?.datasets.none} data sets have no price set yet. From 0767d1625367650d37601af6a703aa5a7e80d391 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Tue, 9 Feb 2021 17:58:44 +0200 Subject: [PATCH 06/19] ApolloProvider wrapping --- src/components/molecules/MarketStats.tsx | 18 ++++++------ src/helpers/wrapRootElement.tsx | 11 +++++--- src/providers/ApolloClientProvider.tsx | 36 ++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 src/providers/ApolloClientProvider.tsx diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index e9139f9282..32d5a835f9 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -1,12 +1,12 @@ 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' import { gql, useQuery } from '@apollo/client' -import { setNestedObjectValues } from 'formik' import Conversion from '../atoms/Price/Conversion' +import PriceUnit from '../atoms/Price/PriceUnit' +import Price from '../organisms/AssetContent/Pricing/FormPricing/Price' interface MarketStatsResponse { datasets: { @@ -26,8 +26,7 @@ const getTotalPoolsValues = gql` query PoolsData { poolFactories { totalLockedValue - totalSwapVolume - totalSwapFee + totalOceanLiquidity poolCount finalizedPoolCount } @@ -38,12 +37,13 @@ export default function MarketStats(): ReactElement { const [ref, inView] = useInView() const [stats, setStats] = useState() const [totalLockedValue, setTotalLockedValue] = useState() - + const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() const { data } = useQuery(getTotalPoolsValues) useEffect(() => { if (!data) return setTotalLockedValue(data.poolFactories[0].totalLockedValue) + setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) }, [data]) useEffect(() => { @@ -82,13 +82,11 @@ export default function MarketStats(): ReactElement { return (
- Total of {stats?.datasets.total} data sets & unique - datatokens published by {stats?.owners} accounts. -
{' '} TVL (total value locked) across{' '} - {stats?.datasets.pools} data set pools that contain and - datatokens for each pool. + {stats?.datasets.pools} data set pools that contain{' '} + {' '} + and datatokens for each pool.
{stats?.datasets.none} data sets have no price set yet.
diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx index 6b3506ea5d..bf005f1c86 100644 --- a/src/helpers/wrapRootElement.tsx +++ b/src/helpers/wrapRootElement.tsx @@ -10,6 +10,7 @@ import { } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' import { UserPreferencesProvider } from '../providers/UserPreferences' import PricesProvider from '../providers/Prices' +import ApolloClentProvider from '../providers/ApolloClientProvider' export function getOceanConfig( network: ConfigHelperNetworkName | ConfigHelperNetworkId @@ -32,10 +33,12 @@ export default function wrapRootElement({ initialConfig={oceanInitialConfig} web3ModalOpts={web3ModalOpts} > - - - {element} - + + + + {element} + + ) } diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx new file mode 100644 index 0000000000..17490dd121 --- /dev/null +++ b/src/providers/ApolloClientProvider.tsx @@ -0,0 +1,36 @@ +import { + ApolloClient, + ApolloProvider, + HttpLink, + InMemoryCache, + NormalizedCacheObject +} from '@apollo/client' +import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' +import { useOcean } from '@oceanprotocol/react' +import React, { useState, useEffect, ReactNode, ReactElement } from 'react' + +export default function ApolloClentProvider({ + children +}: { + children: ReactNode +}): ReactElement { + const [client, setClient] = useState>() + const { config } = useOcean() + + useEffect(() => { + const newClient = new ApolloClient({ + link: new HttpLink({ + uri: `${ + (config as ConfigHelperConfig).subgraphUri + }/subgraphs/name/oceanprotocol/ocean-subgraph`, + fetch + }), + cache: new InMemoryCache() + }) + setClient(newClient) + }, [config]) + + return {children} +} + +export { ApolloClentProvider } From 0c680e4c6ab9ae143c7cb2ec3eb77521b0cbc16b Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 07:22:50 +0200 Subject: [PATCH 07/19] config subgraphUri verified --- src/components/App.tsx | 46 ++++++++++++------------ src/components/molecules/MarketStats.tsx | 18 +++++----- src/helpers/wrapRootElement.tsx | 6 ++-- src/providers/ApolloClientProvider.tsx | 9 +++-- 4 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 1aec81da4c..788c78eed1 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -52,6 +52,8 @@ export default function App({ const [client, setClient] = useState>() useEffect(() => { + if (!(config as ConfigHelperConfig)?.subgraphUri) return + const newClient = new ApolloClient({ link: new HttpLink({ uri: `${ @@ -62,31 +64,31 @@ export default function App({ cache: new InMemoryCache() }) setClient(newClient) - }, [config]) + }, [config, client]) return ( - {client ? ( - -
-
- {(props as PageProps).uri === '/' && ( - - )} - {isAccountInPurgatory && ( - - )} +
+
+ {(props as PageProps).uri === '/' && ( + + )} + {isAccountInPurgatory && ( + + )} + {client ? ( +
{children}
-
-
- - ) : ( - <> - )} + + ) : ( + <> + )} +
+
) } diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 32d5a835f9..6943744c56 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -6,7 +6,6 @@ import { useInView } from 'react-intersection-observer' import { gql, useQuery } from '@apollo/client' import Conversion from '../atoms/Price/Conversion' import PriceUnit from '../atoms/Price/PriceUnit' -import Price from '../organisms/AssetContent/Pricing/FormPricing/Price' interface MarketStatsResponse { datasets: { @@ -26,7 +25,7 @@ const getTotalPoolsValues = gql` query PoolsData { poolFactories { totalLockedValue - totalOceanLiquidity + totalLiquidity poolCount finalizedPoolCount } @@ -36,14 +35,14 @@ const getTotalPoolsValues = gql` export default function MarketStats(): ReactElement { const [ref, inView] = useInView() const [stats, setStats] = useState() - const [totalLockedValue, setTotalLockedValue] = useState() - const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() + const [totalValueLocked, setTotalValueLocked] = useState() + const [totalLiquidity, setTotalLiquidity] = useState() const { data } = useQuery(getTotalPoolsValues) useEffect(() => { if (!data) return - setTotalLockedValue(data.poolFactories[0].totalLockedValue) - setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) + setTotalValueLocked(data.poolFactories[0].totalLockedValue) + setTotalLiquidity(data.poolFactories[0].totalLiquidity) }, [data]) useEffect(() => { @@ -82,13 +81,12 @@ export default function MarketStats(): ReactElement { return (
- {' '} - TVL (total value locked) across{' '} + {' '} + TVL across{' '} {stats?.datasets.pools} data set pools that contain{' '} - {' '} + and and datatokens for each pool.
- {stats?.datasets.none} data sets have no price set yet.
) } diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx index bf005f1c86..6df9d17413 100644 --- a/src/helpers/wrapRootElement.tsx +++ b/src/helpers/wrapRootElement.tsx @@ -10,7 +10,7 @@ import { } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' import { UserPreferencesProvider } from '../providers/UserPreferences' import PricesProvider from '../providers/Prices' -import ApolloClentProvider from '../providers/ApolloClientProvider' +import ApolloClientProvider from '../providers/ApolloClientProvider' export function getOceanConfig( network: ConfigHelperNetworkName | ConfigHelperNetworkId @@ -33,12 +33,12 @@ export default function wrapRootElement({ initialConfig={oceanInitialConfig} web3ModalOpts={web3ModalOpts} > - + {element} - + ) } diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index 17490dd121..2e0c854b70 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -9,7 +9,7 @@ import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHel import { useOcean } from '@oceanprotocol/react' import React, { useState, useEffect, ReactNode, ReactElement } from 'react' -export default function ApolloClentProvider({ +export default function ApolloClientProvider({ children }: { children: ReactNode @@ -18,6 +18,8 @@ export default function ApolloClentProvider({ const { config } = useOcean() useEffect(() => { + if (!(config as ConfigHelperConfig)?.subgraphUri) return + const newClient = new ApolloClient({ link: new HttpLink({ uri: `${ @@ -27,10 +29,11 @@ export default function ApolloClentProvider({ }), cache: new InMemoryCache() }) + setClient(newClient) - }, [config]) + }, [config, client]) return {children} } -export { ApolloClentProvider } +export { ApolloClientProvider } From a05aed11e32ceaccd78ec44d64443284d18eb656 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 15:47:34 +0200 Subject: [PATCH 08/19] pool number taken from graph --- src/components/App.tsx | 37 +----------- src/components/molecules/MarketStats.tsx | 72 ++++-------------------- src/providers/ApolloClientProvider.tsx | 2 +- 3 files changed, 14 insertions(+), 97 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 788c78eed1..1b33ef89d9 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -7,15 +7,7 @@ import { useSiteMetadata } from '../hooks/useSiteMetadata' import { useOcean } from '@oceanprotocol/react' import Alert from './atoms/Alert' import { graphql, PageProps, useStaticQuery } from 'gatsby' -import { - ApolloClient, - ApolloProvider, - HttpLink, - InMemoryCache, - NormalizedCacheObject -} from '@apollo/client' -import fetch from 'cross-fetch' -import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' + const contentQuery = graphql` query AppQuery { purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) { @@ -45,26 +37,9 @@ export default function App({ const { warning } = useSiteMetadata() const { isInPurgatory: isAccountInPurgatory, - purgatoryData: accountPurgatory, - config + purgatoryData: accountPurgatory } = useOcean() - const [client, setClient] = useState>() - - useEffect(() => { - if (!(config as ConfigHelperConfig)?.subgraphUri) return - - const newClient = new ApolloClient({ - link: new HttpLink({ - uri: `${ - (config as ConfigHelperConfig).subgraphUri - }/subgraphs/name/oceanprotocol/ocean-subgraph`, - fetch - }), - cache: new InMemoryCache() - }) - setClient(newClient) - }, [config, client]) return (
@@ -80,13 +55,7 @@ export default function App({ state="error" /> )} - {client ? ( - -
{children}
- - ) : ( - <> - )} +
{children}
 diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 6943744c56..667028e9e7 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -1,90 +1,38 @@ -import { Logger } from '@oceanprotocol/lib' import React, { ReactElement, useEffect, useState } from 'react' -import axios from 'axios' import styles from './MarketStats.module.css' -import { useInView } from 'react-intersection-observer' import { gql, useQuery } from '@apollo/client' import Conversion from '../atoms/Price/Conversion' import PriceUnit from '../atoms/Price/PriceUnit' -interface MarketStatsResponse { - datasets: { - pools: number - exchanges: number - none: number - total: number - } - owners: number - ocean: number - datatoken: number -} - -const refreshInterval = 60000 // 60 sec. - const getTotalPoolsValues = gql` query PoolsData { poolFactories { - totalLockedValue - totalLiquidity + totalValueLocked + totalOceanLiquidity poolCount - finalizedPoolCount } } ` export default function MarketStats(): ReactElement { - const [ref, inView] = useInView() - const [stats, setStats] = useState() const [totalValueLocked, setTotalValueLocked] = useState() - const [totalLiquidity, setTotalLiquidity] = useState() + const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() + const [poolCount, setPoolCount] = useState() const { data } = useQuery(getTotalPoolsValues) useEffect(() => { if (!data) return - setTotalValueLocked(data.poolFactories[0].totalLockedValue) - setTotalLiquidity(data.poolFactories[0].totalLiquidity) + setTotalValueLocked(data.poolFactories[0].totalValueLocked) + setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) + setPoolCount(data.poolFactories[0].totalOceanLiquidity) }, [data]) - useEffect(() => { - const source = axios.CancelToken.source() - - 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]) - return ( -
+
{' '} TVL across{' '} - {stats?.datasets.pools} data set pools that contain{' '} - and + {poolCount} data set pools that contain{' '} + {' '} and datatokens for each pool.
diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index 2e0c854b70..ab6abad187 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -31,7 +31,7 @@ export default function ApolloClientProvider({ }) setClient(newClient) - }, [config, client]) + }, [config]) return {children} } From d97907289a401636c8b2200a516b910400b2788c Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 16:53:53 +0200 Subject: [PATCH 09/19] Apollo provider fix --- src/providers/ApolloClientProvider.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index ab6abad187..3d53911c9c 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -14,8 +14,18 @@ export default function ApolloClientProvider({ }: { children: ReactNode }): ReactElement { - const [client, setClient] = useState>() const { config } = useOcean() + const [client, setClient] = useState>( + new ApolloClient({ + link: new HttpLink({ + uri: `${ + (config as ConfigHelperConfig).subgraphUri + }/subgraphs/name/oceanprotocol/ocean-subgraph`, + fetch + }), + cache: new InMemoryCache() + }) + ) useEffect(() => { if (!(config as ConfigHelperConfig)?.subgraphUri) return From db56d06987b2c604f88a9666ae06d6354b4e9f1b Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 17:03:29 +0200 Subject: [PATCH 10/19] Pools number set fixed --- src/components/molecules/MarketStats.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 667028e9e7..a24bc656c1 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -17,14 +17,15 @@ const getTotalPoolsValues = gql` export default function MarketStats(): ReactElement { const [totalValueLocked, setTotalValueLocked] = useState() const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() - const [poolCount, setPoolCount] = useState() + const [poolCount, setPoolCount] = useState() const { data } = useQuery(getTotalPoolsValues) useEffect(() => { if (!data) return + setTotalValueLocked(data.poolFactories[0].totalValueLocked) setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) - setPoolCount(data.poolFactories[0].totalOceanLiquidity) + setPoolCount(data.poolFactories[0].poolCount) }, [data]) return ( From c334bbe92695c5caac12721842604d03f79946c8 Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 17:04:12 +0200 Subject: [PATCH 11/19] deleted unused imports --- src/components/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 1b33ef89d9..ecb98db9c0 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useEffect, useState } from 'react' +import React, { ReactElement } from 'react' import Footer from './organisms/Footer' import Header from './organisms/Header' import Styles from '../global/Styles' From 6b1adcd832721f6138cf461af235a6c4668861ce Mon Sep 17 00:00:00 2001 From: mihaisc Date: Wed, 10 Feb 2021 17:29:26 +0200 Subject: [PATCH 12/19] fix fetch, gatsby build Signed-off-by: mihaisc --- src/providers/ApolloClientProvider.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index 3d53911c9c..450add4991 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -7,6 +7,7 @@ import { } from '@apollo/client' 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' export default function ApolloClientProvider({ @@ -43,7 +44,11 @@ export default function ApolloClientProvider({ setClient(newClient) }, [config]) - return {children} + return client ? ( + {children} + ) : ( + <> + ) } export { ApolloClientProvider } From 7a3277105ad8f8cfed9f7ce21a40fd2002f2fd6d Mon Sep 17 00:00:00 2001 From: mihaisc Date: Wed, 10 Feb 2021 17:51:16 +0200 Subject: [PATCH 13/19] remove apollo client redundant init Signed-off-by: mihaisc --- src/providers/ApolloClientProvider.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index 450add4991..6b5fc8d90a 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -16,17 +16,7 @@ export default function ApolloClientProvider({ children: ReactNode }): ReactElement { const { config } = useOcean() - const [client, setClient] = useState>( - new ApolloClient({ - link: new HttpLink({ - uri: `${ - (config as ConfigHelperConfig).subgraphUri - }/subgraphs/name/oceanprotocol/ocean-subgraph`, - fetch - }), - cache: new InMemoryCache() - }) - ) + const [client, setClient] = useState>() useEffect(() => { if (!(config as ConfigHelperConfig)?.subgraphUri) return From 1c437caa1aba4034255bc5f7713eb5c43c1180bf Mon Sep 17 00:00:00 2001 From: mihaisc Date: Wed, 10 Feb 2021 18:09:15 +0200 Subject: [PATCH 14/19] fix prop Signed-off-by: mihaisc --- src/components/molecules/MarketStats.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index a24bc656c1..0d82a172c8 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -30,7 +30,7 @@ export default function MarketStats(): ReactElement { return (
- {' '} + {' '} TVL across{' '} {poolCount} data set pools that contain{' '} {' '} From d6e157ad50234bfc92935e1cbb0b2eaf449f1f6b Mon Sep 17 00:00:00 2001 From: mihaisc Date: Wed, 10 Feb 2021 18:57:45 +0200 Subject: [PATCH 15/19] update pool count Signed-off-by: mihaisc --- src/components/molecules/MarketStats.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 0d82a172c8..518a732ac2 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -9,7 +9,7 @@ const getTotalPoolsValues = gql` poolFactories { totalValueLocked totalOceanLiquidity - poolCount + finalizedPoolCount } } ` @@ -25,7 +25,7 @@ export default function MarketStats(): ReactElement { setTotalValueLocked(data.poolFactories[0].totalValueLocked) setTotalOceanLiquidity(data.poolFactories[0].totalOceanLiquidity) - setPoolCount(data.poolFactories[0].poolCount) + setPoolCount(data.poolFactories[0].finalizedPoolCount) }, [data]) return ( From f86e4afa4a4a00c4fc861a788dcd8c4d4909881a Mon Sep 17 00:00:00 2001 From: "claudia.holhos" Date: Wed, 10 Feb 2021 21:41:09 +0200 Subject: [PATCH 16/19] tooltip added --- src/components/atoms/Tooltip.tsx | 7 ++++++- src/components/molecules/MarketStats.module.css | 4 ++++ src/components/molecules/MarketStats.tsx | 7 +++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx index 1719ff0a00..afb2dc4895 100644 --- a/src/components/atoms/Tooltip.tsx +++ b/src/components/atoms/Tooltip.tsx @@ -28,7 +28,9 @@ export default function Tooltip({ trigger, disabled, className, - placement + placement, + link, + reference }: { content: ReactNode children?: ReactNode @@ -36,6 +38,8 @@ export default function Tooltip({ disabled?: boolean className?: string placement?: Placement + link?: string + reference?: string }): ReactElement { const [props, setSpring] = useSpring(() => animation.from) @@ -72,6 +76,7 @@ export default function Tooltip({
{content} + {link && {reference}}
diff --git a/src/components/molecules/MarketStats.module.css b/src/components/molecules/MarketStats.module.css index 1acf8ce880..61392a80b9 100644 --- a/src/components/molecules/MarketStats.module.css +++ b/src/components/molecules/MarketStats.module.css @@ -12,3 +12,7 @@ color: var(--color-secondary) !important; font-size: var(--font-size-small) !important; } + +.info { + width: .85rem +} \ No newline at end of file diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 518a732ac2..fea869b881 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -3,6 +3,7 @@ import styles from './MarketStats.module.css' 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 { @@ -35,6 +36,12 @@ export default function MarketStats(): ReactElement { {poolCount} data set pools that contain{' '} {' '} and datatokens for each pool. +
) From 5703ff52ffc76c09f2161ca8ffbf1ed2c3dcb739 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 11 Feb 2021 11:50:05 +0100 Subject: [PATCH 17/19] small development config refactor * make sure initial config is actually overwritten with local addresses --- src/helpers/NetworkMonitor.tsx | 19 +++++++++++++------ src/helpers/wrapRootElement.tsx | 12 ++++++++++-- src/providers/ApolloClientProvider.tsx | 23 +++++++++++++---------- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/helpers/NetworkMonitor.tsx b/src/helpers/NetworkMonitor.tsx index 994b1e9ca2..6c692a666f 100644 --- a/src/helpers/NetworkMonitor.tsx +++ b/src/helpers/NetworkMonitor.tsx @@ -7,6 +7,18 @@ import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json' const refreshInterval = 5000 // 5 sec. +export function getDevelopmentConfig(): Partial { + return { + factoryAddress: contractAddresses.development?.DTFactory, + poolFactoryAddress: contractAddresses.development?.BFactory, + fixedRateExchangeAddress: contractAddresses.development?.FixedRateExchange, + metadataContractAddress: contractAddresses.development?.Metadata, + oceanTokenAddress: contractAddresses.development?.Ocean, + // There is no subgraph in barge so we hardcode the Rinkeby one for now + subgraphUri: 'https://subgraph.rinkeby.oceanprotocol.com' + } +} + export function NetworkMonitor(): ReactElement { const { connect, @@ -28,12 +40,7 @@ export function NetworkMonitor(): ReactElement { // add local dev values ...(chainId === '8996' && { - factoryAddress: contractAddresses.development?.DTFactory, - poolFactoryAddress: contractAddresses.development?.BFactory, - fixedRateExchangeAddress: - contractAddresses.development?.FixedRateExchange, - metadataContractAddress: contractAddresses.development?.Metadata, - oceanTokenAddress: contractAddresses.development?.Ocean + ...getDevelopmentConfig() }) } diff --git a/src/helpers/wrapRootElement.tsx b/src/helpers/wrapRootElement.tsx index 6df9d17413..15c6be4099 100644 --- a/src/helpers/wrapRootElement.tsx +++ b/src/helpers/wrapRootElement.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from 'react' import { OceanProvider } from '@oceanprotocol/react' import { ConfigHelper, Config } from '@oceanprotocol/lib' import { web3ModalOpts } from '../utils/wallet' -import { NetworkMonitor } from './NetworkMonitor' +import { getDevelopmentConfig, NetworkMonitor } from './NetworkMonitor' import appConfig from '../../app.config' import { ConfigHelperNetworkName, @@ -27,7 +27,15 @@ export default function wrapRootElement({ element: ReactElement }): ReactElement { const { network } = appConfig - const oceanInitialConfig = getOceanConfig(network) + const oceanInitialConfig = { + ...getOceanConfig(network), + + // add local dev values + ...(network === 'development' && { + ...getDevelopmentConfig() + }) + } + return ( { if (!(config as ConfigHelperConfig)?.subgraphUri) return - const newClient = new ApolloClient({ - link: new HttpLink({ - uri: `${ - (config as ConfigHelperConfig).subgraphUri - }/subgraphs/name/oceanprotocol/ocean-subgraph`, - fetch - }), - cache: new InMemoryCache() - }) - + const newClient = createClient((config as ConfigHelperConfig).subgraphUri) setClient(newClient) }, [config]) From fc23bbc2c8129a4e73c9e35cbcfb239f647e103b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 11 Feb 2021 12:17:46 +0100 Subject: [PATCH 18/19] log error on missing subgraphUri --- src/providers/ApolloClientProvider.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/providers/ApolloClientProvider.tsx b/src/providers/ApolloClientProvider.tsx index 59f22fc571..a3bfcb2acb 100644 --- a/src/providers/ApolloClientProvider.tsx +++ b/src/providers/ApolloClientProvider.tsx @@ -5,6 +5,7 @@ import { 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' @@ -31,7 +32,12 @@ export default function ApolloClientProvider({ const [client, setClient] = useState>() useEffect(() => { - if (!(config as ConfigHelperConfig)?.subgraphUri) return + if (!(config as ConfigHelperConfig)?.subgraphUri) { + Logger.error( + 'No subgraphUri defined, preventing ApolloProvider from initialization.' + ) + return + } const newClient = createClient((config as ConfigHelperConfig).subgraphUri) setClient(newClient) From e89e8610952c270e473f4bbe45ae242d11536888 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 11 Feb 2021 12:57:54 +0100 Subject: [PATCH 19/19] copy change --- src/components/molecules/MarketStats.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index fea869b881..1fbbde6771 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -34,15 +34,14 @@ export default function MarketStats(): ReactElement { {' '} TVL across{' '} {poolCount} data set pools that contain{' '} - {' '} - and datatokens for each pool. + , + plus datatokens for each pool. -
) }