From d8b40bfd46a8e1b28fbda0fb0ccf351f0f3f0860 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Mon, 12 Apr 2021 18:50:26 +0300 Subject: [PATCH 1/4] fetch all data from graph (#501) Signed-off-by: mihaisc --- src/providers/Asset.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx index 1740a5446..60612fc8b 100644 --- a/src/providers/Asset.tsx +++ b/src/providers/Asset.tsx @@ -36,6 +36,8 @@ const poolQuery = gql` query PoolPrice($datatoken: String) { pools(where: { datatokenAddress: $datatoken }) { spotPrice + datatokenReserve + oceanReserve } } ` @@ -121,7 +123,9 @@ function AssetProvider({ return setPrice((prevState) => ({ ...prevState, - value: poolPrice.pools[0].spotPrice + value: poolPrice.pools[0].spotPrice, + ocean: poolPrice.pools[0].oceanReserve, + datatoken: poolPrice.pools[0].datatokenReserve })) }, [poolPrice]) From b8247c7ef4ef2020fb24814a34174f5cbd62df62 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Tue, 13 Apr 2021 11:57:59 +0300 Subject: [PATCH 2/4] The Graph sync status (#466) * WIP * query update * quick fix Signed-off-by: mihaisc * get blocks number when no provider, added threshold * format code * naming fix * show graph out of sync message inside announcement banner * added loader * moved sync component * refactor all the things * new atoms/AnnouncementBanner : banner component reduced to presentation only, where its content is always passed as props * revised molecules/NetworkBanner: the former AnnouncementBanner now holds all the specific network detection logic, in the end also returns the atoms/AnnouncementBanner * new hook hooks/useGraphSyncStatus: move all the graph fetching logic in there so we can use its status in multiple places in the app without all this props passing. This also decouples the SyncStatus component in footer from its logic * in App.tsx, add the graph sync warning banner in another atoms/AnnouncementBanner, getting its values from the hook * data flow refactor * .env.example tweak * race condition fighting * subgraph loading * polygon fallback fix * no interval fetching * turn around logic for adding infura ID * removed graphNotSynched Co-authored-by: mihaisc Co-authored-by: Norbi Co-authored-by: Matthias Kretschmann --- .env.example | 3 +- src/components/App.tsx | 26 +++-- .../AnnouncementBanner.module.css | 15 +++ src/components/atoms/AnnouncementBanner.tsx | 44 ++++++++ src/components/molecules/MarketStats.tsx | 2 +- ...nouncementBanner.tsx => NetworkBanner.tsx} | 31 ++---- .../molecules/SyncStatus.module.css | 14 +++ src/components/molecules/SyncStatus.tsx | 23 ++++ src/components/organisms/Footer.tsx | 4 +- src/hooks/useGraphSyncStatus.ts | 104 ++++++++++++++++++ src/providers/Web3.tsx | 23 ++++ src/utils/ocean.ts | 4 +- src/utils/web3.ts | 1 + 13 files changed, 258 insertions(+), 36 deletions(-) rename src/components/{molecules => atoms}/AnnouncementBanner.module.css (66%) create mode 100644 src/components/atoms/AnnouncementBanner.tsx rename src/components/molecules/{AnnouncementBanner.tsx => NetworkBanner.tsx} (74%) create mode 100644 src/components/molecules/SyncStatus.module.css create mode 100644 src/components/molecules/SyncStatus.tsx create mode 100644 src/hooks/useGraphSyncStatus.ts diff --git a/.env.example b/.env.example index 7d5fd03a5..d1481767b 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,5 @@ -# Network, possible values: development, pacific, rinkeby, mainnet +# Default network, possible values: +# "development", "ropsten", "rinkeby", "mainnet", "polygon" GATSBY_NETWORK="rinkeby" #GATSBY_INFURA_PROJECT_ID="xxx" diff --git a/src/components/App.tsx b/src/components/App.tsx index 0818321bb..a4fc74a0f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,14 +1,16 @@ import React, { ReactElement } from 'react' +import { graphql, PageProps, useStaticQuery } from 'gatsby' +import Alert from './atoms/Alert' import Footer from './organisms/Footer' import Header from './organisms/Header' import Styles from '../global/Styles' -import styles from './App.module.css' -import { useSiteMetadata } from '../hooks/useSiteMetadata' -import Alert from './atoms/Alert' -import { graphql, PageProps, useStaticQuery } from 'gatsby' -import { useAccountPurgatory } from '../hooks/useAccountPurgatory' -import AnnouncementBanner from './molecules/AnnouncementBanner' import { useWeb3 } from '../providers/Web3' +import { useSiteMetadata } from '../hooks/useSiteMetadata' +import { useAccountPurgatory } from '../hooks/useAccountPurgatory' +import NetworkBanner from './molecules/NetworkBanner' +import styles from './App.module.css' +import AnnouncementBanner from './atoms/AnnouncementBanner' +import { useGraphSyncStatus } from '../hooks/useGraphSyncStatus' const contentQuery = graphql` query AppQuery { @@ -39,15 +41,25 @@ export default function App({ const { warning } = useSiteMetadata() const { accountId } = useWeb3() const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) + const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus() return (
- {!location.pathname.includes('/asset/did') && } + {!isGraphSynced && ( + + )} + {!location.pathname.includes('/asset/did') && } +
+ {(props as PageProps).uri === '/' && ( )} + {isInPurgatory && ( div { display: inline-block; } diff --git a/src/components/atoms/AnnouncementBanner.tsx b/src/components/atoms/AnnouncementBanner.tsx new file mode 100644 index 000000000..5cb14e996 --- /dev/null +++ b/src/components/atoms/AnnouncementBanner.tsx @@ -0,0 +1,44 @@ +import React, { ReactElement } from 'react' +import classNames from 'classnames/bind' +import Markdown from '../atoms/Markdown' +import Button from '../atoms/Button' +import styles from './AnnouncementBanner.module.css' + +const cx = classNames.bind(styles) + +export interface AnnouncementAction { + name: string + style?: string + handleAction: () => void +} + +export default function AnnouncementBanner({ + text, + action, + state, + className +}: { + text: string + action?: AnnouncementAction + state?: 'success' | 'warning' | 'error' + className?: string +}): ReactElement { + const styleClasses = cx({ + banner: true, + error: state === 'error', + warning: state === 'warning', + success: state === 'success', + [className]: className + }) + + return ( +
+ {text && } + {action && ( + + )} +
+ ) +} diff --git a/src/components/molecules/MarketStats.tsx b/src/components/molecules/MarketStats.tsx index 4f4e34b22..b3584dca0 100644 --- a/src/components/molecules/MarketStats.tsx +++ b/src/components/molecules/MarketStats.tsx @@ -19,7 +19,7 @@ export default function MarketStats(): ReactElement { const [totalValueLocked, setTotalValueLocked] = useState() const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() const [poolCount, setPoolCount] = useState() - const { data } = useQuery(getTotalPoolsValues) + const { data } = useQuery(getTotalPoolsValues, { pollInterval: 20000 }) useEffect(() => { if (!data || !data.poolFactories || data.poolFactories.length === 0) return diff --git a/src/components/molecules/AnnouncementBanner.tsx b/src/components/molecules/NetworkBanner.tsx similarity index 74% rename from src/components/molecules/AnnouncementBanner.tsx rename to src/components/molecules/NetworkBanner.tsx index 3aaacb237..badbc96aa 100644 --- a/src/components/molecules/AnnouncementBanner.tsx +++ b/src/components/molecules/NetworkBanner.tsx @@ -1,21 +1,15 @@ import React, { ReactElement, useEffect, useState } from 'react' -import styles from './AnnouncementBanner.module.css' -import Markdown from '../atoms/Markdown' import { useWeb3 } from '../../providers/Web3' import { addCustomNetwork, NetworkObject } from '../../utils/web3' import { getOceanConfig } from '../../utils/ocean' import { getProviderInfo } from 'web3modal' import { useOcean } from '../../providers/Ocean' import { useSiteMetadata } from '../../hooks/useSiteMetadata' -import Button from '../atoms/Button' +import AnnouncementBanner, { + AnnouncementAction +} from '../atoms/AnnouncementBanner' -export interface AnnouncementAction { - name: string - style?: string - handleAction: () => void -} - -const network: NetworkObject = { +const networkMatic: NetworkObject = { chainId: 137, name: 'Matic Network', urlList: [ @@ -24,7 +18,7 @@ const network: NetworkObject = { ] } -export default function AnnouncementBanner(): ReactElement { +export default function NetworkBanner(): ReactElement { const { web3Provider } = useWeb3() const { config, connect } = useOcean() const { announcement } = useSiteMetadata() @@ -34,7 +28,7 @@ export default function AnnouncementBanner(): ReactElement { const addCustomNetworkAction = { name: 'Add custom network', - handleAction: () => addCustomNetwork(web3Provider, network) + handleAction: () => addCustomNetwork(web3Provider, networkMatic) } const switchToPolygonAction = { name: 'Switch to Polygon', @@ -88,16 +82,5 @@ export default function AnnouncementBanner(): ReactElement { } }, [web3Provider, config, announcement]) - return ( -
-
- {text && } - {action && ( - - )} -
-
- ) + return } diff --git a/src/components/molecules/SyncStatus.module.css b/src/components/molecules/SyncStatus.module.css new file mode 100644 index 000000000..9709389fd --- /dev/null +++ b/src/components/molecules/SyncStatus.module.css @@ -0,0 +1,14 @@ +.sync { + display: inline-block; + font-size: var(--font-size-mini); + cursor: help; +} + +.text { + margin-left: calc(var(--spacer) / 12); +} + +.status { + transform: scale(0.7); + transform-origin: bottom; +} diff --git a/src/components/molecules/SyncStatus.tsx b/src/components/molecules/SyncStatus.tsx new file mode 100644 index 000000000..11073d314 --- /dev/null +++ b/src/components/molecules/SyncStatus.tsx @@ -0,0 +1,23 @@ +import React, { ReactElement } from 'react' +import Tooltip from '../atoms/Tooltip' +import Status from '../atoms/Status' +import { useGraphSyncStatus } from '../../hooks/useGraphSyncStatus' +import styles from './SyncStatus.module.css' + +export default function SyncStatus(): ReactElement { + const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus() + + return ( +
+ + + {blockGraph} + +
+ ) +} diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx index a98f5d7b4..075ac2dda 100644 --- a/src/components/organisms/Footer.tsx +++ b/src/components/organisms/Footer.tsx @@ -5,6 +5,7 @@ import { useSiteMetadata } from '../../hooks/useSiteMetadata' import { Link } from 'gatsby' import MarketStats from '../molecules/MarketStats' import BuildId from '../atoms/BuildId' +import SyncStatus from '../molecules/SyncStatus' export default function Footer(): ReactElement { const { copyright } = useSiteMetadata() @@ -13,9 +14,8 @@ export default function Footer(): ReactElement { return (