diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 486c5c083..3493a0a0c 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -1,21 +1,20 @@ import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' import { InputProps } from '../../../atoms/Input' -import InputElement from '../../../atoms/Input/InputElement' import stylesIndex from './index.module.css' import styles from './Advanced.module.css' -import Label from '../../../atoms/Input/Label' import { MetadataPublishForm } from '../../../../@types/MetaData' -import Cost from './Cost' -import Conversion from '../../../atoms/Price/Conversion' import FormHelp from '../../../atoms/Input/Help' import Wallet from '../../Wallet' import { useOcean } from '@oceanprotocol/react' import Alert from '../../../atoms/Alert' import Coin from './Coin' +import { isCorrectNetwork } from '../../../../utils/wallet' +import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' export default function Advanced(props: InputProps): ReactElement { + const { appConfig } = useSiteMetadata() const { price } = props.form.values as MetadataPublishForm - const { balance } = useOcean() + const { account, balance, chainId } = useOcean() const cost = '1' const weightOnDataToken = '90' // in % @@ -24,9 +23,18 @@ export default function Advanced(props: InputProps): ReactElement { const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) const [error, setError] = useState() + const correctNetwork = isCorrectNetwork(chainId) + const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) => + c.toUpperCase() + ) + // Check: account, network & insuffciant balance useEffect(() => { - if (balance.ocean < ocean) { + if (!account) { + setError(`No account detected. Please connect your wallet.`) + } else if (!correctNetwork) { + setError(`Wrong Network. Please connect to ${desiredNetworkName}.`) + } else if (balance.ocean < ocean) { setError(`Insufficiant balance. You need at least ${ocean} OCEAN`) } else { setError(undefined) diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx index 425ed517d..5b12ba0f8 100644 --- a/src/components/molecules/FormFields/Price/Coin.tsx +++ b/src/components/molecules/FormFields/Price/Coin.tsx @@ -4,7 +4,6 @@ import styles from './Coin.module.css' import InputElement from '../../../atoms/Input/InputElement' import { ReactComponent as Logo } from '../../../../images/logo.svg' import Conversion from '../../../atoms/Price/Conversion' -import Label from '../../../atoms/Input/Label' export default function Coin({ symbol, diff --git a/src/components/molecules/Wallet/Feedback.tsx b/src/components/molecules/Wallet/Feedback.tsx index f139ccdf8..17402b682 100644 --- a/src/components/molecules/Wallet/Feedback.tsx +++ b/src/components/molecules/Wallet/Feedback.tsx @@ -21,7 +21,7 @@ export default function Web3Feedback({ const isOceanConnectionError = status === -1 const correctNetwork = isCorrectNetwork(chainId) const showFeedback = !account || isOceanConnectionError || !correctNetwork - const networkName = appConfig.network.replace(/^\w/, (c: string) => + const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) => c.toUpperCase() ) @@ -50,7 +50,7 @@ export default function Web3Feedback({ : isOceanConnectionError ? 'Please try again.' : !correctNetwork - ? `Please connect to ${networkName}.` + ? `Please connect to ${desiredNetworkName}.` : isBalanceInsufficient === true ? 'You do not have enough OCEAN in your wallet to purchase this asset.' : 'Something went wrong.'