diff --git a/src/components/App.tsx b/src/components/App.tsx index 63f44d2ae..0f290d9f3 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -40,18 +40,11 @@ export default function App({ const { warning } = useSiteMetadata() const { accountId } = useWeb3() const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId) - const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus() + // const { isGraphSynced, blockHead, blockGraph } = useGraphSyncStatus() return (
- {(props as PageProps).uri.includes('/asset') && !isGraphSynced && ( - - )} - {(props as PageProps).uri === '/' && ( )} diff --git a/src/components/molecules/Web3Feedback.tsx b/src/components/molecules/Web3Feedback.tsx index 694ea4517..486c2a682 100644 --- a/src/components/molecules/Web3Feedback.tsx +++ b/src/components/molecules/Web3Feedback.tsx @@ -1,8 +1,9 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, useEffect } from 'react' import { useWeb3 } from '../../providers/Web3' import Status from '../atoms/Status' import styles from './Web3Feedback.module.css' import WalletNetworkSwitcher from './WalletNetworkSwitcher' +import { useGraphSyncStatus } from '../../hooks/useGraphSyncStatus' export declare type Web3Error = { status: 'error' | 'warning' | 'success' @@ -18,17 +19,20 @@ export default function Web3Feedback({ isAssetNetwork?: boolean }): ReactElement { const { accountId } = useWeb3() + const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus() const showFeedback = !accountId || // !ocean || isBalanceSufficient === false || - isAssetNetwork === false + isAssetNetwork === false || + isGraphSynced === false - const state = !accountId - ? 'error' - : accountId && isBalanceSufficient && isAssetNetwork - ? 'success' - : 'warning' + const state = + !accountId || !isGraphSynced + ? 'error' + : accountId && isBalanceSufficient && isAssetNetwork + ? 'success' + : 'warning' const title = !accountId ? 'No account connected' @@ -36,6 +40,8 @@ export default function Web3Feedback({ // ? 'Error connecting to Ocean' accountId && isAssetNetwork === false ? 'Not connected to asset network' + : isGraphSynced === false + ? `Data out of sync` : accountId ? isBalanceSufficient === false ? 'Insufficient balance' @@ -44,10 +50,10 @@ export default function Web3Feedback({ const message = !accountId ? 'Please connect your Web3 wallet.' - : // : !ocean - // ? 'Please try again.' - isBalanceSufficient === false + : isBalanceSufficient === false ? 'You do not have enough OCEAN in your wallet to purchase this asset.' + : isGraphSynced === false + ? `The data for this network has only synced to Ethereum block ${blockGraph} (out of ${blockHead}). Transactions may fail! Please check back soon` : 'Something went wrong.' return showFeedback ? ( diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index f9686f91f..1a88cb9dd 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -18,7 +18,7 @@ import axios from 'axios' export default function AssetActions(): ReactElement { const { accountId, balance } = useWeb3() const { ocean, config, account } = useOcean() - const { price, ddo, metadata, type, isAssetNetwork } = useAsset() + const { price, ddo, isAssetNetwork } = useAsset() const [isBalanceSufficient, setIsBalanceSufficient] = useState() const [dtBalance, setDtBalance] = useState() @@ -86,7 +86,7 @@ export default function AssetActions(): ReactElement { } } init() - }, [ocean, accountId, ddo.dataToken]) + }, [ocean, accountId, ddo.dataToken, isAssetNetwork]) // Check user balance against price useEffect(() => {