feat: add warning for exchange with amount higher than user balance

.prettierrc

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "none",
-    "singleQuote": true,
-    "semi": false,
-    "tabWidth": 2
-  }
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false,
+  "tabWidth": 2
+}

src/components/InputTextAndSelect/InputTextAndSelect.js

@@ -1,4 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
+import clsx from 'clsx'
+
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/styles'
@@ -76,6 +78,12 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: '2px solid rgba(255,255,255,0.38)',
     padding: '5px 14px 0 14px'
   },
+  rootContainerError: {
+    borderBottom: `2px solid ${theme.palette.error.main}`,
+    '& p': {
+      color: theme.palette.error.main
+    }
+  },
   inputText: {
     fontSize: 16.2,
     lineHeight: 1.48,
@@ -123,7 +131,8 @@ const InputTextAndSelect = ({
   value,
   inputDisabled,
   useHelperTextAsNode,
-  placeholder
+  placeholder,
+  hasError
 }) => {
   const classes = useStyles()
   const { t } = useTranslation('translations')
@@ -150,7 +159,13 @@ const InputTextAndSelect = ({
 
   return (
     <Box className={classes.boxInputContainer}>
-      <form autoComplete="off" className={classes.rootContainer}>
+      <form
+        autoComplete="off"
+        className={clsx({
+          [classes.rootContainer]: true,
+          [classes.rootContainerError]: hasError
+        })}
+      >
         <Box className={classes.inputWrapper}>
           <Typography className={classes.labelText} variant="body1">
             {label}
@@ -198,8 +213,8 @@ const InputTextAndSelect = ({
       {useHelperTextAsNode ? (
         helperText
       ) : (
-          <Typography className={classes.helperText}>{helperText}</Typography>
-        )}
+        <Typography className={classes.helperText}>{helperText}</Typography>
+      )}
     </Box>
   )
 }
@@ -214,14 +229,15 @@ InputTextAndSelect.propTypes = {
   value: PropTypes.any,
   inputDisabled: PropTypes.bool,
   useHelperTextAsNode: PropTypes.bool,
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  hasError: PropTypes.bool
 }
 
 InputTextAndSelect.defaultProps = {
   label: '',
   selected: null,
   helperText: null,
-  onChange: () => { },
+  onChange: () => {},
   options: [],
   useHelperTextAsNode: false,
   placeholder: null

src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js

@@ -169,6 +169,7 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
   const [loading, setLoading] = useState(false)
   const [helperTextReceive, setHelperTextReceive] = useState('')
   const [userChangeInput, setUserChangeInput] = useState('')
+  const [userBalance, setUserBalance] = useState()
   const [, setLastInterval] = useState('')
 
   const getTokenValue = (token) => {
@@ -344,14 +345,21 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
       return
     }
 
-    const assets = evolutiondex.getExchangeAssetsFromToken2(youReceive.inputValue, pair)
+    const assets = evolutiondex.getExchangeAssetsFromToken2(
+      youReceive.inputValue,
+      pair
+    )
 
     setAssets(assets)
     setYouGive((prevState) => ({
       ...prevState,
       inputValue: assets.assetToGive.toString().split(' ')[0]
     }))
-    setLastInterval(setTimeout(() => { setUserChangeInput('youGive') }, 2000))
+    setLastInterval(
+      setTimeout(() => {
+        setUserChangeInput('youGive')
+      }, 2000)
+    )
   }, [userChangeInput, pair, youReceive.inputValue])
 
   useEffect(() => {
@@ -383,8 +391,13 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
   }, [showMessage, exchangeState.currentPair, ual.activeUser])
 
   useEffect(() => {
+    if (!pair) {
+      return
+    }
+
     const getCurrencyBalance = async () => {
       let walletPool = {}
+      let userbalance = null
 
       if (ual.activeUser) {
         const pool1 = await ual.activeUser.rpc.get_currency_balance(
@@ -407,17 +420,25 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
             ? pool2[0]
             : `0 ${pair.pool2.asset.symbol.code().toString()}`
         }
+
+        userbalance = {
+          [pair.pool1.asset.symbol.code().toString()]: {
+            token: pair.pool1.asset.symbol.code().toString(),
+            amount: pool1.length ? parseFloat(pool1[0].split(' ')[0]) : 0
+          },
+          [pair.pool2.asset.symbol.code().toString()]: {
+            token: pair.pool2.asset.symbol.code().toString(),
+            amount: pool2.length ? parseFloat(pool2[0].split(' ')[0]) : 0
+          }
+        }
       }
 
       setYouGive((prevValue) => ({
         ...prevValue,
         walletBalance: walletPool
       }))
       getTokenValue(youReceive.selectValue)
-    }
-
-    if (!pair) {
-      return
+      setUserBalance(userbalance)
     }
 
     getCurrencyBalance()
@@ -440,17 +461,26 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => {
           onChange={handleOnChange('youGive')}
           value={youGive}
           helperText={
-            pair &&
-            ual.activeUser && (
+            pair && (
               <Typography
                 variant="body1"
                 className={clsx([classes.textInfo, classes.helperText])}
               >
-                {`Your Wallet: ${youGive.walletBalance[youGive.selectValue]}`}
+                {ual.activeUser
+                  ? `Your Wallet: ${
+                      youGive.walletBalance[youGive.selectValue] || ''
+                    }`
+                  : `Your Wallet: 0 ${youGive.selectValue}`}
               </Typography>
             )
           }
           useHelperTextAsNode
+          hasError={
+            userBalance
+              ? (userBalance[youGive.selectValue]?.amount || 0) <
+                parseFloat(youGive.inputValue || 0)
+              : false
+          }
         />
         <IconButton aria-label="switch" onClick={handleOnSwitchValues}>
           {isDesktop ? <SwapHorizIcon /> : <ImportExportIcon />}