mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Use ternary conditionals instead of && (#12406)
This commit is contained in:
parent
5fea5fac8c
commit
3f687ff45f
@ -24,11 +24,8 @@ export default function AccountListItem({
|
||||
className="account-list-item__identicon"
|
||||
diameter={18}
|
||||
/>
|
||||
|
||||
<div className="account-list-item__account-name">{name || address}</div>
|
||||
|
||||
{icon && <div className="account-list-item__icon">{icon}</div>}
|
||||
|
||||
{icon ? <div className="account-list-item__icon">{icon}</div> : null}
|
||||
<AccountMismatchWarning address={address} />
|
||||
</div>
|
||||
|
||||
|
@ -196,7 +196,9 @@ export default class AccountMenu extends Component {
|
||||
key={identity.address}
|
||||
>
|
||||
<div className="account-menu__check-mark">
|
||||
{isSelected && <div className="account-menu__check-mark-icon" />}
|
||||
{isSelected ? (
|
||||
<div className="account-menu__check-mark-icon" />
|
||||
) : null}
|
||||
</div>
|
||||
<Identicon address={identity.address} diameter={24} />
|
||||
<div className="account-menu__account-info">
|
||||
|
@ -93,7 +93,7 @@ export default class ConfirmPageContainerContent extends Component {
|
||||
|
||||
return (
|
||||
<div className="confirm-page-container-content">
|
||||
{warning && <ConfirmPageContainerWarning warning={warning} />}
|
||||
{warning ? <ConfirmPageContainerWarning warning={warning} /> : null}
|
||||
{ethGasPriceWarning && (
|
||||
<ConfirmPageContainerWarning warning={ethGasPriceWarning} />
|
||||
)}
|
||||
@ -124,7 +124,9 @@ export default class ConfirmPageContainerContent extends Component {
|
||||
submitText={submitText}
|
||||
disabled={disabled}
|
||||
>
|
||||
{unapprovedTxCount > 1 && <a onClick={onCancelAll}>{rejectNText}</a>}
|
||||
{unapprovedTxCount > 1 ? (
|
||||
<a onClick={onCancelAll}>{rejectNText}</a>
|
||||
) : null}
|
||||
</PageContainerFooter>
|
||||
</div>
|
||||
);
|
||||
|
@ -56,7 +56,7 @@ export default function ConfirmPageContainerHeader({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!isFullScreen && <NetworkDisplay />}
|
||||
{isFullScreen ? null : <NetworkDisplay />}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
@ -106,9 +106,9 @@ export default class ContactList extends PureComponent {
|
||||
return (
|
||||
<div className="send__select-recipient-wrapper__list">
|
||||
{children || null}
|
||||
{searchForRecents && this.renderRecents()}
|
||||
{searchForContacts && this.renderAddressBook()}
|
||||
{searchForMyAccounts && this.renderMyAccounts()}
|
||||
{searchForRecents ? this.renderRecents() : null}
|
||||
{searchForContacts ? this.renderAddressBook() : null}
|
||||
{searchForMyAccounts ? this.renderMyAccounts() : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -12,7 +12,7 @@ export default class ModalContent extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className="modal-content">
|
||||
{title && <div className="modal-content__title">{title}</div>}
|
||||
{title ? <div className="modal-content__title">{title}</div> : null}
|
||||
{description && (
|
||||
<div className="modal-content__description">{description}</div>
|
||||
)}
|
||||
|
@ -14,7 +14,7 @@ export default class SignatureRequestHeader extends PureComponent {
|
||||
return (
|
||||
<div className="signature-request-header">
|
||||
<div className="signature-request-header--account">
|
||||
{fromAccount && <AccountListItem account={fromAccount} />}
|
||||
{fromAccount ? <AccountListItem account={fromAccount} /> : null}
|
||||
</div>
|
||||
<div className="signature-request-header--network">
|
||||
<NetworkDisplay colored={false} />
|
||||
|
@ -40,7 +40,7 @@ export default class TransactionActivityLogIcon extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className={classnames('transaction-activity-log-icon', className)}>
|
||||
{imagePath && <img src={imagePath} height="9" width="9" alt="" />}
|
||||
{imagePath ? <img src={imagePath} height="9" width="9" alt="" /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -35,7 +35,7 @@ export default function ActionableMessage({
|
||||
|
||||
return (
|
||||
<div className={actionableMessageClassName}>
|
||||
{useIcon && <InfoTooltipIcon fillColor={iconFillColor} />}
|
||||
{useIcon ? <InfoTooltipIcon fillColor={iconFillColor} /> : null}
|
||||
{infoTooltipText && (
|
||||
<InfoTooltip
|
||||
position="left"
|
||||
|
@ -66,7 +66,7 @@ const Button = ({
|
||||
)}
|
||||
{...buttonProps}
|
||||
>
|
||||
{icon && <span className="button__icon">{icon}</span>}
|
||||
{icon ? <span className="button__icon">{icon}</span> : null}
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
|
@ -35,7 +35,7 @@ export default function Chip({
|
||||
role={isInteractive ? 'button' : undefined}
|
||||
tabIndex={isInteractive ? 0 : undefined}
|
||||
>
|
||||
{leftIcon && <div className="chip__left-icon">{leftIcon}</div>}
|
||||
{leftIcon ? <div className="chip__left-icon">{leftIcon}</div> : null}
|
||||
{children ?? (
|
||||
<Typography
|
||||
className="chip__label"
|
||||
@ -47,7 +47,7 @@ export default function Chip({
|
||||
{label}
|
||||
</Typography>
|
||||
)}
|
||||
{rightIcon && <div className="chip__right-icon">{rightIcon}</div>}
|
||||
{rightIcon ? <div className="chip__right-icon">{rightIcon}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ export default function IconWithLabel({ icon, label, className }) {
|
||||
return (
|
||||
<div className={classnames('icon-with-label', className)}>
|
||||
{icon}
|
||||
{label && <span className="icon-with-label__label">{label}</span>}
|
||||
{label ? <span className="icon-with-label__label">{label}</span> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -33,7 +33,7 @@ export default function ListItem({
|
||||
}
|
||||
}}
|
||||
>
|
||||
{icon && <div className="list-item__icon">{icon}</div>}
|
||||
{icon ? <div className="list-item__icon">{icon}</div> : null}
|
||||
<div className="list-item__heading">
|
||||
{React.isValidElement(title) ? (
|
||||
title
|
||||
@ -44,12 +44,16 @@ export default function ListItem({
|
||||
<div className="list-item__heading-wrap">{titleIcon}</div>
|
||||
)}
|
||||
</div>
|
||||
{subtitle && <div className="list-item__subheading">{subtitle}</div>}
|
||||
{children && <div className="list-item__actions">{children}</div>}
|
||||
{midContent && <div className="list-item__mid-content">{midContent}</div>}
|
||||
{rightContent && (
|
||||
{subtitle ? (
|
||||
<div className="list-item__subheading">{subtitle}</div>
|
||||
) : null}
|
||||
{children ? <div className="list-item__actions">{children}</div> : null}
|
||||
{midContent ? (
|
||||
<div className="list-item__mid-content">{midContent}</div>
|
||||
) : null}
|
||||
{rightContent ? (
|
||||
<div className="list-item__right-content">{rightContent}</div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -21,7 +21,7 @@ export default class PageContainerHeader extends Component {
|
||||
renderTabs() {
|
||||
const { tabs } = this.props;
|
||||
|
||||
return tabs && <ul className="page-container__tabs">{tabs}</ul>;
|
||||
return tabs ? <ul className="page-container__tabs">{tabs}</ul> : null;
|
||||
}
|
||||
|
||||
renderCloseAction() {
|
||||
@ -99,7 +99,9 @@ export default class PageContainerHeader extends Component {
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
{subtitle && <div className="page-container__subtitle">{subtitle}</div>}
|
||||
{subtitle ? (
|
||||
<div className="page-container__subtitle">{subtitle}</div>
|
||||
) : null}
|
||||
|
||||
{this.renderCloseAction()}
|
||||
|
||||
|
@ -26,6 +26,10 @@ function QrCodeView(props) {
|
||||
qrImage.addData(address);
|
||||
qrImage.make();
|
||||
|
||||
const header = message ? (
|
||||
<div className="qr-code__header">{message}</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div className="qr-code">
|
||||
{Array.isArray(message) ? (
|
||||
@ -37,9 +41,9 @@ function QrCodeView(props) {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
message && <div className="qr-code__header">{message}</div>
|
||||
header
|
||||
)}
|
||||
{warning && <span className="qr_code__error">{warning}</span>}
|
||||
{warning ? <span className="qr_code__error">{warning}</span> : null}
|
||||
<div
|
||||
className="qr-code__wrapper"
|
||||
dangerouslySetInnerHTML={{
|
||||
|
@ -108,7 +108,7 @@ export default class UnitInput extends PureComponent {
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
{suffix && <div className="unit-input__suffix">{suffix}</div>}
|
||||
{suffix ? <div className="unit-input__suffix">{suffix}</div> : null}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
@ -273,7 +273,7 @@ class AccountList extends Component {
|
||||
{this.renderPagination()}
|
||||
{this.renderButtons()}
|
||||
{this.renderForgetDevice()}
|
||||
{showPopover && this.renderSelectPathPopover()}
|
||||
{showPopover ? this.renderSelectPathPopover() : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -235,7 +235,7 @@ export default class SelectHardware extends Component {
|
||||
<div className="new-external-account-form">
|
||||
{this.renderHeader()}
|
||||
{this.renderButtons()}
|
||||
{this.state.selectedDevice && this.renderTutorialsteps()}
|
||||
{this.state.selectedDevice ? this.renderTutorialsteps() : null}
|
||||
{this.renderContinueButton()}
|
||||
</div>
|
||||
);
|
||||
|
@ -258,7 +258,9 @@ export default class ImportWithSeedPhrase extends PureComponent {
|
||||
autoComplete="off"
|
||||
/>
|
||||
)}
|
||||
{seedPhraseError && <span className="error">{seedPhraseError}</span>}
|
||||
{seedPhraseError ? (
|
||||
<span className="error">{seedPhraseError}</span>
|
||||
) : null}
|
||||
<div
|
||||
className="first-time-flow__checkbox-container"
|
||||
onClick={this.toggleShowSeedPhrase}
|
||||
|
@ -340,8 +340,8 @@ export default class Routes extends Component {
|
||||
/>
|
||||
<AccountMenu />
|
||||
<div className="main-container-wrapper">
|
||||
{isLoading && <Loading loadingMessage={loadMessage} />}
|
||||
{!isLoading && isNetworkLoading && <LoadingNetwork />}
|
||||
{isLoading ? <Loading loadingMessage={loadMessage} /> : null}
|
||||
{!isLoading && isNetworkLoading ? <LoadingNetwork /> : null}
|
||||
{this.renderRoutes()}
|
||||
</div>
|
||||
{isUnlocked ? <Alerts history={this.props.history} /> : null}
|
||||
|
@ -50,17 +50,20 @@ export default class SendContent extends Component {
|
||||
return (
|
||||
<PageContainerContent>
|
||||
<div className="send-v2__form">
|
||||
{gasError && this.renderError(gasError)}
|
||||
{isEthGasPrice && this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)}
|
||||
{isAssetSendable === false &&
|
||||
this.renderError(UNSENDABLE_ASSET_ERROR_KEY)}
|
||||
{error && this.renderError(error)}
|
||||
{warning && this.renderWarning()}
|
||||
{gasError ? this.renderError(gasError) : null}
|
||||
{isEthGasPrice
|
||||
? this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)
|
||||
: null}
|
||||
{isAssetSendable === false
|
||||
? this.renderError(UNSENDABLE_ASSET_ERROR_KEY)
|
||||
: null}
|
||||
{error ? this.renderError(error) : null}
|
||||
{warning ? this.renderWarning() : null}
|
||||
{this.maybeRenderAddContact()}
|
||||
<SendAssetRow />
|
||||
<SendAmountRow />
|
||||
{networkOrAccountNotSupports1559 && <SendGasRow />}
|
||||
{this.props.showHexData && <SendHexDataRow />}
|
||||
{networkOrAccountNotSupports1559 ? <SendGasRow /> : null}
|
||||
{this.props.showHexData ? <SendHexDataRow /> : null}
|
||||
</div>
|
||||
</PageContainerContent>
|
||||
);
|
||||
|
@ -30,7 +30,7 @@ export default class SendRowWrapper extends Component {
|
||||
<div className="send-v2__form-field-container">
|
||||
<div className="send-v2__form-field">{formField}</div>
|
||||
<div>
|
||||
{showError && <SendRowErrorMessage errorType={errorType} />}
|
||||
{showError ? <SendRowErrorMessage errorType={errorType} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,7 +50,7 @@ export default class SendRowWrapper extends Component {
|
||||
<div className="send-v2__form-row">
|
||||
<div className="send-v2__form-label">
|
||||
{label}
|
||||
{showError && <SendRowErrorMessage errorType={errorType} />}
|
||||
{showError ? <SendRowErrorMessage errorType={errorType} /> : null}
|
||||
{customLabelContent}
|
||||
</div>
|
||||
<div className="send-v2__form-field">{formField}</div>
|
||||
|
@ -533,7 +533,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className="settings-page__body">
|
||||
{warning && <div className="settings-tab__error">{warning}</div>}
|
||||
{warning ? <div className="settings-tab__error">{warning}</div> : null}
|
||||
{this.renderStateLogs()}
|
||||
{this.renderMobileSync()}
|
||||
{this.renderResetAccount()}
|
||||
|
@ -136,7 +136,9 @@ export default class ContactListTab extends Component {
|
||||
<div className="address-book-wrapper">
|
||||
{this.renderAddressBookContent()}
|
||||
{this.renderContactContent()}
|
||||
{!addingContact && addressBook.length > 0 && this.renderAddButton()}
|
||||
{!addingContact && addressBook.length > 0
|
||||
? this.renderAddButton()
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -244,7 +244,7 @@ export default class NetworksTab extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className="networks-tab__body">
|
||||
{isFullScreen && this.renderSubHeader()}
|
||||
{isFullScreen ? this.renderSubHeader() : null}
|
||||
<div className="networks-tab__content">
|
||||
{this.renderNetworksTabContent()}
|
||||
{!isFullScreen && !shouldRenderNetworkForm ? (
|
||||
|
@ -146,7 +146,7 @@ export default class SecurityTab extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className="settings-page__body">
|
||||
{warning && <div className="settings-tab__error">{warning}</div>}
|
||||
{warning ? <div className="settings-tab__error">{warning}</div> : null}
|
||||
{this.renderSeedWords()}
|
||||
{this.renderIncomingTransactionsOptIn()}
|
||||
{this.renderPhishingDetectionToggle()}
|
||||
|
@ -212,7 +212,7 @@ export default class SettingsTab extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className="settings-page__body">
|
||||
{warning && <div className="settings-tab__error">{warning}</div>}
|
||||
{warning ? <div className="settings-tab__error">{warning}</div> : null}
|
||||
{this.renderCurrentConversion()}
|
||||
{this.renderUsePrimaryCurrencyOptions()}
|
||||
{this.renderCurrentLocale()}
|
||||
|
@ -272,7 +272,7 @@ export default function AwaitingSwap({
|
||||
<div className="awaiting-swap__main-descrption">{descriptionText}</div>
|
||||
{content}
|
||||
</div>
|
||||
{!errorKey && swapComplete && <MakeAnotherSwap />}
|
||||
{!errorKey && swapComplete ? <MakeAnotherSwap /> : null}
|
||||
<SwapsFooter
|
||||
onSubmit={async () => {
|
||||
if (errorKey === OFFLINE_FOR_MAINTENANCE) {
|
||||
|
@ -52,13 +52,16 @@ export default function ItemList({
|
||||
|
||||
// If there is a token for import based on a contract address, it's the only one in the list.
|
||||
const hasTokenForImport = results.length === 1 && results[0].notImported;
|
||||
const placeholder = Placeholder ? (
|
||||
<Placeholder searchQuery={searchQuery} />
|
||||
) : null;
|
||||
return results.length === 0 ? (
|
||||
Placeholder && <Placeholder searchQuery={searchQuery} />
|
||||
placeholder
|
||||
) : (
|
||||
<div className="searchable-item-list">
|
||||
{listTitle && (
|
||||
{listTitle ? (
|
||||
<div className="searchable-item-list__title">{listTitle}</div>
|
||||
)}
|
||||
) : null}
|
||||
<div
|
||||
className={classnames(
|
||||
'searchable-item-list__list-container',
|
||||
@ -100,43 +103,43 @@ export default function ItemList({
|
||||
onKeyUp={(e) => e.key === 'Enter' && onClick()}
|
||||
key={`searchable-item-list-item-${i}`}
|
||||
>
|
||||
{(iconUrl || primaryLabel) && (
|
||||
{iconUrl || primaryLabel ? (
|
||||
<UrlIcon url={iconUrl} name={primaryLabel} />
|
||||
)}
|
||||
{!(iconUrl || primaryLabel) && identiconAddress && (
|
||||
) : null}
|
||||
{!(iconUrl || primaryLabel) && identiconAddress ? (
|
||||
<div className="searchable-item-list__identicon">
|
||||
<Identicon address={identiconAddress} diameter={24} />
|
||||
</div>
|
||||
)}
|
||||
{IconComponent && <IconComponent />}
|
||||
) : null}
|
||||
{IconComponent ? <IconComponent /> : null}
|
||||
<div className="searchable-item-list__labels">
|
||||
<div className="searchable-item-list__item-labels">
|
||||
{primaryLabel && (
|
||||
{primaryLabel ? (
|
||||
<span className="searchable-item-list__primary-label">
|
||||
{primaryLabel}
|
||||
</span>
|
||||
)}
|
||||
{secondaryLabel && (
|
||||
) : null}
|
||||
{secondaryLabel ? (
|
||||
<span className="searchable-item-list__secondary-label">
|
||||
{secondaryLabel}
|
||||
</span>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
{!hideRightLabels &&
|
||||
(rightPrimaryLabel || rightSecondaryLabel) && (
|
||||
<div className="searchable-item-list__right-labels">
|
||||
{rightPrimaryLabel && (
|
||||
<span className="searchable-item-list__right-primary-label">
|
||||
{rightPrimaryLabel}
|
||||
</span>
|
||||
)}
|
||||
{rightSecondaryLabel && (
|
||||
<span className="searchable-item-list__right-secondary-label">
|
||||
{rightSecondaryLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
(rightPrimaryLabel || rightSecondaryLabel) ? (
|
||||
<div className="searchable-item-list__right-labels">
|
||||
{rightPrimaryLabel ? (
|
||||
<span className="searchable-item-list__right-primary-label">
|
||||
{rightPrimaryLabel}
|
||||
</span>
|
||||
) : null}
|
||||
{rightSecondaryLabel ? (
|
||||
<span className="searchable-item-list__right-secondary-label">
|
||||
{rightSecondaryLabel}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{result.notImported && (
|
||||
<Button type="confirm" onClick={onClick}>
|
||||
|
Loading…
Reference in New Issue
Block a user