refactor passed value to bottomText prop

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 <FormattedMessage {...error} />;
+    }
+    if (warning) {
+        return <FormattedMessage {...warning} />;
+    }
+    if (info) {
+        return <FormattedMessage {...info} />;
+    }
+    return null;
+};

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) => {
                             )}
                         </InputLabelWrapper>
                     }
-                    bottomText={
+                    bottomText={getBottomText(errors.gasLimit, warnings.gasLimit, infos.gasLimit)}
-                        <>
-                            {(errors.gasLimit && <FormattedMessage {...errors.gasLimit} />) ||
-                                (warnings.gasLimit && (
-                                    <FormattedMessage {...warnings.gasLimit} />
-                                )) ||
-                                (infos.gasLimit && <FormattedMessage {...infos.gasLimit} />)}
-                        </>
-                    }
                     value={
                         calculatingGasLimit
                             ? props.intl.formatMessage(l10nMessages.TR_CALCULATING_DOT_DOT)
@@ -300,15 +292,7 @@ const AdvancedForm = (props: Props) => {
                             </Left>
                         </InputLabelWrapper>
                     }
-                    bottomText={
+                    bottomText={getBottomText(errors.gasPrice, warnings.gasPrice, infos.gasPrice)}
-                        <>
-                            {(errors.gasPrice && <FormattedMessage {...errors.gasPrice} />) ||
-                                (warnings.gasPrice && (
-                                    <FormattedMessage {...warnings.gasPrice} />
-                                )) ||
-                                (infos.v && <FormattedMessage {...infos.gasPrice} />)}
-                        </>
-                    }
                     value={gasPrice}
                     onChange={event => onGasPriceChange(event.target.value)}
                 />
@@ -339,13 +323,7 @@ const AdvancedForm = (props: Props) => {
                     </InputLabelWrapper>
                 }
                 state={getDataTextareaState(!!errors.data, !!warnings.data)}
-                bottomText={
+                bottomText={getBottomText(errors.data, warnings.data, infos.data)}
-                    <>
-                        {(errors.data && <FormattedMessage {...errors.data} />) ||
-                            (warnings.data && <FormattedMessage {...warnings.data} />) ||
-                            (infos.data && <FormattedMessage {...infos.data} />)}
-                    </>
-                }
                 isDisabled={networkSymbol !== currency}
                 value={networkSymbol !== currency ? '' : data}
                 onChange={event => onDataChange(event.target.value)}

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={
+                    bottomText={getBottomText(errors.address, warnings.address, infos.address)}
-                        <>
-                            {(errors.address && <FormattedMessage {...errors.address} />) ||
-                                (warnings.address && <FormattedMessage {...warnings.address} />) ||
-                                (infos.address && <FormattedMessage {...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={
+                    bottomText={getBottomText(errors.amount, warnings.amount, infos.amount)}
-                        <>
-                            {(errors.amount && <FormattedMessage {...errors.amount} />) ||
-                                (warnings.amount && <FormattedMessage {...warnings.amount} />) ||
-                                (infos.amount && <FormattedMessage {...infos.amount} />)}
-                        </>
-                    }
                     sideAddons={[
                         <SetMaxAmountButton key="icon" onClick={() => onSetMax()} isWhite={!setMax}>
                             {!setMax && (

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) => {
                             </Left>
                         </InputLabelWrapper>
                     }
-                    bottomText={
+                    bottomText={getBottomText(errors.fee, warnings.fee, infos.fee)}
-                        <>
-                            {(errors.fee && <FormattedMessage {...errors.fee} />) ||
-                                (warnings.fee && <FormattedMessage {...warnings.fee} />) ||
-                                (infos.fee && <FormattedMessage {...infos.fee} />)}
-                        </>
-                    }
                     value={fee}
                     onChange={event => onFeeChange(event.target.value)}
                 />
@@ -177,19 +171,11 @@ const AdvancedForm = (props: Props) => {
                             </Left>
                         </InputLabelWrapper>
                     }
-                    bottomText={
+                    bottomText={getBottomText(
-                        <>
+                        errors.destinationTag,
-                            {(errors.destinationTag && (
+                        warnings.destinationTag,
-                                <FormattedMessage {...errors.destinationTag} />
+                        infos.destinationTag
-                            )) ||
+                    )}
-                                (warnings.destinationTag && (
-                                    <FormattedMessage {...warnings.destinationTag} />
-                                )) ||
-                                (infos.destinationTag && (
-                                    <FormattedMessage {...infos.destinationTag} />
-                                ))}
-                        </>
-                    }
                     value={destinationTag}
                     onChange={event => onDestinationTagChange(event.target.value)}
                 />

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={
+                    bottomText={getBottomText(errors.address, warnings.address, infos.address)}
-                        <>
-                            {(errors.address && <FormattedMessage {...errors.address} />) ||
-                                (warnings.address && <FormattedMessage {...warnings.address} />) ||
-                                (infos.address && <FormattedMessage {...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={
+                    bottomText={getBottomText(errors.amount, warnings.amount, infos.amount)}
-                        <>
-                            {(errors.amount && <FormattedMessage {...errors.amount} />) ||
-                                (warnings.amount && <FormattedMessage {...warnings.amount} />) ||
-                                (infos.amount && <FormattedMessage {...infos.amount} />)}
-                        </>
-                    }
                     sideAddons={[
                         <SetMaxAmountButton key="icon" onClick={() => onSetMax()} isWhite={!setMax}>
                             {!setMax && (