From 1f332c4148baad3f62d3d85ff9670c73a011f9fd Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Tue, 31 Aug 2021 10:47:55 +0300 Subject: [PATCH] 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 | 11 ++++ src/components/molecules/Web3Feedback.tsx | 64 +++++++++---------- .../Compute/FormComputeDataset.tsx | 13 +++- .../AssetActions/Compute/index.stories.tsx | 6 +- .../organisms/AssetActions/Compute/index.tsx | 5 +- .../organisms/AssetActions/Consume.tsx | 1 + .../organisms/AssetActions/index.tsx | 6 +- 7 files changed, 57 insertions(+), 49 deletions(-) diff --git a/src/components/atoms/ButtonBuy.tsx b/src/components/atoms/ButtonBuy.tsx index 387e23c7e..91f15d1a1 100644 --- a/src/components/atoms/ButtonBuy.tsx +++ b/src/components/atoms/ButtonBuy.tsx @@ -21,6 +21,7 @@ interface ButtonBuyProps { dtBalanceSelectedComputeAsset?: string selectedComputeAssetLowPoolLiquidity?: boolean selectedComputeAssetType?: string + isBalanceSufficient: boolean isLoading: boolean onClick?: (e: FormEvent) => 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, diff --git a/src/components/molecules/Web3Feedback.tsx b/src/components/molecules/Web3Feedback.tsx index 68e8c17f8..f4fde7cb7 100644 --- a/src/components/molecules/Web3Feedback.tsx +++ b/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() + const [title, setTitle] = useState() + const [message, setMessage] = useState() + const [showFeedback, setShowFeedback] = useState(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 ? (
diff --git a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx b/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx index 4faa36a4a..81d38dcb3 100644 --- a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx +++ b/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(false) + const { accountId, balance } = useWeb3() const { ocean } = useOcean() const [algorithmConsumableStatus, setAlgorithmConsumableStatus] = useState() @@ -148,6 +150,13 @@ export default function FormStartCompute({ hasDatatokenSelectedComputeAsset ]) + useEffect(() => { + if (!totalPrice) return + setIsBalanceSufficient( + compareAsBN(balance.ocean, `${totalPrice}`) || Number(dtBalance) >= 1 + ) + }, [totalPrice]) + return (
{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} diff --git a/src/components/organisms/AssetActions/Compute/index.stories.tsx b/src/components/organisms/AssetActions/Compute/index.stories.tsx index 0200b6820..71c535c95 100644 --- a/src/components/organisms/AssetActions/Compute/index.stories.tsx +++ b/src/components/organisms/AssetActions/Compute/index.stories.tsx @@ -12,9 +12,5 @@ export default { } export const Default = (): ReactElement => ( - + ) diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx index f8bb95943..a338ff254 100644 --- a/src/components/organisms/AssetActions/Compute/index.tsx +++ b/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() @@ -94,7 +92,6 @@ export default function Compute({ isJobStarting === true || file === null || !ocean || - !isBalanceSufficient || (!hasPreviousDatasetOrder && !hasDatatoken && !(datasetMaxDT >= 1)) || (!hasPreviousAlgorithmOrder && !hasAlgoAssetDatatoken && !(algoMaxDT >= 1)) diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index ae3ba97af..3e6aa5a25 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/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} /> ) diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index ff797277c..d6307057d 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -111,7 +111,6 @@ export default function AssetActions(): ReactElement { const UseContent = isCompute ? ( - + ) }