Web3Feedback UI messages fix (#812)

* show isBalanceSufficient warning only on Use tab

* show warning icon when both isAssetNetwork and isGraphSynced are false

* refactor display messages code fix order and icon issues

* moved isBalanceSufficient message handle from Web3Feedback to ButtonBuy

* more refactoring, improve feedback message change

* fix isBalanceSufficient for buying a compute job

* fix lint error

src/components/atoms/ButtonBuy.tsx

@@ -21,6 +21,7 @@ interface ButtonBuyProps {
   dtBalanceSelectedComputeAsset?: string
   selectedComputeAssetLowPoolLiquidity?: boolean
   selectedComputeAssetType?: string
+  isBalanceSufficient: boolean
   isLoading: boolean
   onClick?: (e: FormEvent<HTMLButtonElement>) => void
   stepText?: string
@@ -38,6 +39,7 @@ function getConsumeHelpText(
   lowPoolLiquidity: boolean,
   assetType: string,
   isConsumable: boolean,
+  isBalanceSufficient: boolean,
   consumableFeedback: string
 ) {
   const text =
@@ -49,6 +51,8 @@ function getConsumeHelpText(
       ? `You own ${dtBalance} ${dtSymbol} allowing you to use this data set by spending 1 ${dtSymbol}, but without paying OCEAN again.`
       : lowPoolLiquidity
       ? `There are not enought ${dtSymbol} available in the pool for the transaction to take place`
+      : isBalanceSufficient === false
+      ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
       : `For using this ${assetType}, you will buy 1 ${dtSymbol} and immediately spend it back to the publisher and pool.`
   return text
 }
@@ -62,6 +66,7 @@ function getComputeAssetHelpText(
   assetType: string,
   isConsumable: boolean,
   consumableFeedback: string,
+  isBalanceSufficient: boolean,
   hasPreviousOrderSelectedComputeAsset?: boolean,
   hasDatatokenSelectedComputeAsset?: boolean,
   dtSymbolSelectedComputeAsset?: string,
@@ -78,6 +83,7 @@ function getComputeAssetHelpText(
     lowPoolLiquidity,
     assetType,
     isConsumable,
+    isBalanceSufficient,
     consumableFeedback
   )
   const computeAlgoHelpText =
@@ -96,6 +102,8 @@ function getComputeAssetHelpText(
       ? `You own ${dtBalanceSelectedComputeAsset} ${dtSymbolSelectedComputeAsset} allowing you to use the selected ${selectedComputeAssetType} by spending 1 ${dtSymbolSelectedComputeAsset}, but without paying OCEAN again.`
       : selectedComputeAssettLowPoolLiquidity
       ? `There are not enought ${dtSymbolSelectedComputeAsset} available in the pool for the transaction to take place`
+      : isBalanceSufficient === false
+      ? ''
       : `Additionally, you will buy 1 ${dtSymbolSelectedComputeAsset} for the ${selectedComputeAssetType} and spend it back to its publisher and pool.`
   const computeHelpText = selectedComputeAssettLowPoolLiquidity
     ? computeAlgoHelpText
@@ -117,6 +125,7 @@ export default function ButtonBuy({
   assetTimeout,
   isConsumable,
   consumableFeedback,
+  isBalanceSufficient,
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   dtSymbolSelectedComputeAsset,
@@ -168,6 +177,7 @@ export default function ButtonBuy({
                   datasetLowPoolLiquidity,
                   assetType,
                   isConsumable,
+                  isBalanceSufficient,
                   consumableFeedback
                 )
               : getComputeAssetHelpText(
@@ -179,6 +189,7 @@ export default function ButtonBuy({
                   assetType,
                   isConsumable,
                   consumableFeedback,
+                  isBalanceSufficient,
                   hasPreviousOrderSelectedComputeAsset,
                   hasDatatokenSelectedComputeAsset,
                   dtSymbolSelectedComputeAsset,

src/components/molecules/Web3Feedback.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useWeb3 } from '../../providers/Web3'
 import Status from '../atoms/Status'
 import styles from './Web3Feedback.module.css'
@@ -12,46 +12,42 @@ export declare type Web3Error = {
 }
 
 export default function Web3Feedback({
-  isBalanceSufficient,
   isAssetNetwork
 }: {
-  isBalanceSufficient?: boolean
   isAssetNetwork?: boolean
 }): ReactElement {
   const { accountId } = useWeb3()
   const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
-  const showFeedback =
-    !accountId ||
-    isBalanceSufficient === false ||
-    isAssetNetwork === false ||
-    isGraphSynced === false
+  const [state, setState] = useState<string>()
+  const [title, setTitle] = useState<string>()
+  const [message, setMessage] = useState<string>()
+  const [showFeedback, setShowFeedback] = useState<boolean>(false)
 
-  const state =
-    !accountId || !isGraphSynced
-      ? 'error'
-      : accountId && isBalanceSufficient && isAssetNetwork
-      ? 'success'
-      : 'warning'
-
-  const title = !accountId
-    ? 'No account connected'
-    : accountId && isAssetNetwork === false
-    ? 'Not connected to asset network'
-    : isGraphSynced === false
-    ? `Data out of sync`
-    : accountId
-    ? isBalanceSufficient === false
-      ? 'Insufficient balance'
-      : 'Connected to Ocean'
-    : 'Something went wrong'
-
-  const message = !accountId
-    ? 'Please connect your Web3 wallet.'
-    : 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.'
+  useEffect(() => {
+    setShowFeedback(
+      !accountId || isAssetNetwork === false || isGraphSynced === false
+    )
+    if (accountId && isAssetNetwork && isGraphSynced) return
+    if (!accountId) {
+      setState('error')
+      setTitle('No account connected')
+      setMessage('Please connect your Web3 wallet.')
+    } else if (isAssetNetwork === false) {
+      setState('error')
+      setTitle('Not connected to asset network')
+      setMessage('Please connect your Web3 wallet.')
+    } else if (isGraphSynced === false) {
+      setState('warning')
+      setTitle('Data out of sync')
+      setMessage(
+        `The data for this network has only synced to Ethereum block ${blockGraph} (out of ${blockHead}). Transactions may fail! Please check back soon.`
+      )
+    } else {
+      setState('warning')
+      setTitle('Something went wrong.')
+      setMessage('Something went wrong.')
+    }
+  }, [accountId, isGraphSynced, isAssetNetwork])
 
   return showFeedback ? (
     <section className={styles.feedback}>

src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx

@@ -6,6 +6,7 @@ import { FormFieldProps } from '../../../../@types/Form'
 import { useStaticQuery, graphql } from 'gatsby'
 import { DDO, BestPrice } from '@oceanprotocol/lib'
 import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
+import compareAsBN from '../../../../utils/compareAsBN'
 import ButtonBuy from '../../../atoms/ButtonBuy'
 import PriceOutput from './PriceOutput'
 import { useAsset } from '../../../../providers/Asset'
@@ -96,7 +97,8 @@ export default function FormStartCompute({
     useFormikContext()
   const { price, ddo, isAssetNetwork } = useAsset()
   const [totalPrice, setTotalPrice] = useState(price?.value)
-  const { accountId } = useWeb3()
+  const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(false)
+  const { accountId, balance } = useWeb3()
   const { ocean } = useOcean()
   const [algorithmConsumableStatus, setAlgorithmConsumableStatus] =
     useState<number>()
@@ -148,6 +150,13 @@ export default function FormStartCompute({
     hasDatatokenSelectedComputeAsset
   ])
 
+  useEffect(() => {
+    if (!totalPrice) return
+    setIsBalanceSufficient(
+      compareAsBN(balance.ocean, `${totalPrice}`) || Number(dtBalance) >= 1
+    )
+  }, [totalPrice])
+
   return (
     <Form className={styles.form}>
       {content.form.data.map((field: FormFieldProps) => (
@@ -177,6 +186,7 @@ export default function FormStartCompute({
         disabled={
           isComputeButtonDisabled ||
           !isValid ||
+          !isBalanceSufficient ||
           !isAssetNetwork ||
           algorithmConsumableStatus > 0
         }
@@ -202,6 +212,7 @@ export default function FormStartCompute({
         type="submit"
         priceType={price?.type}
         algorithmPriceType={algorithmPrice?.type}
+        isBalanceSufficient={isBalanceSufficient}
         isConsumable={isConsumable}
         consumableFeedback={consumableFeedback}
         algorithmConsumableStatus={algorithmConsumableStatus}

src/components/organisms/AssetActions/Compute/index.stories.tsx

@@ -12,9 +12,5 @@ export default {
 }
 
 export const Default = (): ReactElement => (
-  <Compute
-    dtBalance="1"
-    isBalanceSufficient
-    file={ddo.service[0].attributes.main.files[0]}
-  />
+  <Compute dtBalance="1" file={ddo.service[0].attributes.main.files[0]} />
 )

src/components/organisms/AssetActions/Compute/index.tsx

@@ -48,14 +48,12 @@ const SuccessAction = () => (
 )
 
 export default function Compute({
-  isBalanceSufficient,
   dtBalance,
   file,
   fileIsLoading,
   isConsumable,
   consumableFeedback
 }: {
-  isBalanceSufficient: boolean
   dtBalance: string
   file: FileMetadata
   fileIsLoading?: boolean
@@ -65,7 +63,7 @@ export default function Compute({
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { ocean, account } = useOcean()
-  const { price, type, ddo, isAssetNetwork } = useAsset()
+  const { price, type, ddo } = useAsset()
   const { buyDT, pricingError, pricingStepText } = usePricing()
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [error, setError] = useState<string>()
@@ -94,7 +92,6 @@ export default function Compute({
     isJobStarting === true ||
     file === null ||
     !ocean ||
-    !isBalanceSufficient ||
     (!hasPreviousDatasetOrder && !hasDatatoken && !(datasetMaxDT >= 1)) ||
     (!hasPreviousAlgorithmOrder && !hasAlgoAssetDatatoken && !(algoMaxDT >= 1))
 

src/components/organisms/AssetActions/Consume.tsx

@@ -183,6 +183,7 @@ export default function Consume({
       isLoading={pricingIsLoading || isLoading}
       priceType={price?.type}
       isConsumable={isConsumable}
+      isBalanceSufficient={isBalanceSufficient}
       consumableFeedback={consumableFeedback}
     />
   )

src/components/organisms/AssetActions/index.tsx

@@ -111,7 +111,6 @@ export default function AssetActions(): ReactElement {
   const UseContent = isCompute ? (
     <Compute
       dtBalance={dtBalance}
-      isBalanceSufficient={isBalanceSufficient}
       file={fileMetadata}
       fileIsLoading={fileIsLoading}
       isConsumable={isConsumable}
@@ -153,10 +152,7 @@ export default function AssetActions(): ReactElement {
       <Permission eventType="consume">
         <Tabs items={tabs} className={styles.actions} />
       </Permission>
-      <Web3Feedback
-        isBalanceSufficient={isBalanceSufficient}
-        isAssetNetwork={isAssetNetwork}
-      />
+      <Web3Feedback isAssetNetwork={isAssetNetwork} />
     </>
   )
 }