From 5bc7b65265a3ee653e01d67cb644a996281ffada Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 30 Jul 2020 11:03:26 +0200
Subject: [PATCH] feedback for wallet interaction within price widget

---
 .../molecules/FormFields/Price/Advanced.tsx   | 20 +++++++++++++------
 .../molecules/FormFields/Price/Coin.tsx       |  1 -
 src/components/molecules/Wallet/Feedback.tsx  |  4 ++--
 3 files changed, 16 insertions(+), 9 deletions(-)

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<string>()
+  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.'