diff --git a/src/utils/uiUtils.js b/src/utils/uiUtils.js new file mode 100644 index 00000000..e95d6f80 --- /dev/null +++ b/src/utils/uiUtils.js @@ -0,0 +1,16 @@ +/* @flow */ +import * as React from 'react'; +import { FormattedMessage } from 'react-intl'; + +export const getBottomText = (error: any, warning: any, info: any): React.Node => { + if (error) { + return ; + } + if (warning) { + return ; + } + if (info) { + return ; + } + return null; +}; diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js index 3c25795e..05e9d1f9 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js @@ -15,7 +15,7 @@ import { import type { IntlShape } from 'react-intl'; import { FONT_SIZE } from 'config/variables'; - +import { getBottomText } from 'utils/uiUtils'; import l10nCommonMessages from 'views/common.messages'; import l10nMessages from './index.messages'; @@ -234,15 +234,7 @@ const AdvancedForm = (props: Props) => { )} } - bottomText={ - <> - {(errors.gasLimit && ) || - (warnings.gasLimit && ( - - )) || - (infos.gasLimit && )} - - } + bottomText={getBottomText(errors.gasLimit, warnings.gasLimit, infos.gasLimit)} value={ calculatingGasLimit ? props.intl.formatMessage(l10nMessages.TR_CALCULATING_DOT_DOT) @@ -300,15 +292,7 @@ const AdvancedForm = (props: Props) => { } - bottomText={ - <> - {(errors.gasPrice && ) || - (warnings.gasPrice && ( - - )) || - (infos.v && )} - - } + bottomText={getBottomText(errors.gasPrice, warnings.gasPrice, infos.gasPrice)} value={gasPrice} onChange={event => onGasPriceChange(event.target.value)} /> @@ -339,13 +323,7 @@ const AdvancedForm = (props: Props) => { } state={getDataTextareaState(!!errors.data, !!warnings.data)} - bottomText={ - <> - {(errors.data && ) || - (warnings.data && ) || - (infos.data && )} - - } + bottomText={getBottomText(errors.data, warnings.data, infos.data)} isDisabled={networkSymbol !== currency} value={networkSymbol !== currency ? '' : data} onChange={event => onDataChange(event.target.value)} diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js index d02328c2..723bef68 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/index.js @@ -12,6 +12,7 @@ import * as stateUtils from 'reducers/utils'; import type { Token } from 'flowtype'; import { FormattedMessage } from 'react-intl'; import l10nCommonMessages from 'views/common.messages'; +import { getBottomText } from 'utils/uiUtils'; import AdvancedForm from './components/AdvancedForm'; import PendingTransactions from '../components/PendingTransactions'; @@ -353,13 +354,7 @@ const AccountSend = (props: Props) => { autoCapitalize="off" spellCheck="false" topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)} - bottomText={ - <> - {(errors.address && ) || - (warnings.address && ) || - (infos.address && )} - - } + bottomText={getBottomText(errors.address, warnings.address, infos.address)} value={address} onChange={event => onAddressChange(event.target.value)} sideAddons={[ @@ -397,13 +392,7 @@ const AccountSend = (props: Props) => { } value={amount} onChange={event => onAmountChange(event.target.value)} - bottomText={ - <> - {(errors.amount && ) || - (warnings.amount && ) || - (infos.amount && )} - - } + bottomText={getBottomText(errors.amount, warnings.amount, infos.amount)} sideAddons={[ onSetMax()} isWhite={!setMax}> {!setMax && ( diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js index 79ac08e5..5bbb4fc5 100644 --- a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js @@ -4,7 +4,7 @@ import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import styled from 'styled-components'; import { Input, Tooltip, Icon, colors, icons as ICONS } from 'trezor-ui-components'; - +import { getBottomText } from 'utils/uiUtils'; import l10nCommonMessages from 'views/common.messages'; import l10nSendMessages from 'views/Wallet/views/Account/common.messages'; import l10nMessages from './index.messages'; @@ -125,13 +125,7 @@ const AdvancedForm = (props: Props) => { } - bottomText={ - <> - {(errors.fee && ) || - (warnings.fee && ) || - (infos.fee && )} - - } + bottomText={getBottomText(errors.fee, warnings.fee, infos.fee)} value={fee} onChange={event => onFeeChange(event.target.value)} /> @@ -177,19 +171,11 @@ const AdvancedForm = (props: Props) => { } - bottomText={ - <> - {(errors.destinationTag && ( - - )) || - (warnings.destinationTag && ( - - )) || - (infos.destinationTag && ( - - ))} - - } + bottomText={getBottomText( + errors.destinationTag, + warnings.destinationTag, + infos.destinationTag + )} value={destinationTag} onChange={event => onDestinationTagChange(event.target.value)} /> diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js index 2387790b..e7b1d427 100644 --- a/src/views/Wallet/views/Account/Send/ripple/index.js +++ b/src/views/Wallet/views/Account/Send/ripple/index.js @@ -10,9 +10,9 @@ import { FIAT_CURRENCIES } from 'config/app'; import Title from 'views/Wallet/components/Title'; import l10nCommonMessages from 'views/common.messages'; import Content from 'views/Wallet/components/Content'; +import { getBottomText } from 'utils/uiUtils'; import PendingTransactions from '../components/PendingTransactions'; import AdvancedForm from './components/AdvancedForm'; - import l10nMessages from './index.messages'; import l10nSendMessages from '../../common.messages'; @@ -323,13 +323,7 @@ const AccountSend = (props: Props) => { autoCapitalize="off" spellCheck="false" topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)} - bottomText={ - <> - {(errors.address && ) || - (warnings.address && ) || - (infos.address && )} - - } + bottomText={getBottomText(errors.address, warnings.address, infos.address)} value={address} onChange={event => onAddressChange(event.target.value)} sideAddons={[ @@ -363,13 +357,7 @@ const AccountSend = (props: Props) => { } value={amount} onChange={event => onAmountChange(event.target.value)} - bottomText={ - <> - {(errors.amount && ) || - (warnings.amount && ) || - (infos.amount && )} - - } + bottomText={getBottomText(errors.amount, warnings.amount, infos.amount)} sideAddons={[ onSetMax()} isWhite={!setMax}> {!setMax && (