Check graph sync status (#745)

* fix balance check after network switch

* error location

* remove console

* fix messages

* fixed sync status

* remove comment

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 (
     <Styles>
       <div className={styles.app}>
-        {(props as PageProps).uri.includes('/asset') && !isGraphSynced && (
-          <AnnouncementBanner
-            text={`The data for this network has only synced to Ethereum block ${blockGraph} (out of ${blockHead}). Please check back soon.`}
-            state="error"
-          />
-        )}
-
         {(props as PageProps).uri === '/' && (
           <AnnouncementBanner text={warning.main} />
         )}

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 ? (

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<boolean>()
   const [dtBalance, setDtBalance] = useState<string>()
@@ -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(() => {