diff --git a/.prettierrc b/.prettierrc index 614d382..3f82fb1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,6 @@ { - "trailingComma": "none", - "singleQuote": true, - "semi": false, - "tabWidth": 2 - } \ No newline at end of file + "trailingComma": "none", + "singleQuote": true, + "semi": false, + "tabWidth": 2 +} diff --git a/src/components/InputTextAndSelect/InputTextAndSelect.js b/src/components/InputTextAndSelect/InputTextAndSelect.js index f79e26a..0fe35bf 100644 --- a/src/components/InputTextAndSelect/InputTextAndSelect.js +++ b/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 ( -
+ {label} @@ -198,8 +213,8 @@ const InputTextAndSelect = ({ {useHelperTextAsNode ? ( helperText ) : ( - {helperText} - )} + {helperText} + )} ) } @@ -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 diff --git a/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js b/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js index bc25d62..0056255 100644 --- a/src/routes/Evodex/BackLayer/Exchange/ExchangeBackLayer.js +++ b/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,6 +420,17 @@ 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) => ({ @@ -414,10 +438,7 @@ const ExchangeBackLayer = ({ onReload, ual, isLightMode, showMessage }) => { 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 && ( - {`Your Wallet: ${youGive.walletBalance[youGive.selectValue]}`} + {ual.activeUser + ? `Your Wallet: ${ + youGive.walletBalance[youGive.selectValue] || '' + }` + : `Your Wallet: 0 ${youGive.selectValue}`} ) } useHelperTextAsNode + hasError={ + userBalance + ? (userBalance[youGive.selectValue]?.amount || 0) < + parseFloat(youGive.inputValue || 0) + : false + } /> {isDesktop ? : }