mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-24 12:23:39 +02:00
fbbdaf04ed
* Swaps: Show a network name dynamically in a tooltip * Replace “Ethereum” with “$1”, change “Test” to “Testnet” * Replace 이더리움 with $1 * Translate network names, use ‘Ethereum’ by default if a translation is not available yet * Reorder messages to resolve ESLint issues * Add a snapshot test for the FeeCard component, increase Jest threshold * Enable snapshot testing into external .snap files in ESLint * Add the “networkNameEthereum” key in ko/messages.json, remove default “Ethereum” value * Throw an error if chain ID is not supported by the Swaps feature * Use string literals when calling the `t` fn, * Watch Jest tests silently (no React warnings in terminal, only errors) * Add @testing-library/jest-dom, import it before running Jest tests * Add snapshot testing of Swaps’ React components for happy paths, increase minimum threshold for Jest * Add the test/jest folder for Jest setup and shared functions, use it in Swaps Jest tests * Fix ESLint issues, update linting config * Enable ESLint for .snap files (Jest snapshots), throw an error if a snapshot is bigger than 50 lines * Don’t run lint:fix for .snap files * Move `createProps` outside of `describe` blocks, move store creation inside tests * Use translations instead of keys, update a rendering function to load translations * Make sure all Jest snapshots are shorter than 50 lines (default limit) * Add / update props for Swaps tests * Fix React warnings when running tests for Swaps
86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import InfoTooltip from '../../../components/ui/info-tooltip';
|
|
|
|
const CLASSNAME_WARNING = 'actionable-message--warning';
|
|
const CLASSNAME_DANGER = 'actionable-message--danger';
|
|
const CLASSNAME_WITH_RIGHT_BUTTON = 'actionable-message--with-right-button';
|
|
|
|
const typeHash = {
|
|
warning: CLASSNAME_WARNING,
|
|
danger: CLASSNAME_DANGER,
|
|
};
|
|
|
|
export default function ActionableMessage({
|
|
message = '',
|
|
primaryAction = null,
|
|
secondaryAction = null,
|
|
className = '',
|
|
infoTooltipText = '',
|
|
withRightButton = false,
|
|
type = false,
|
|
}) {
|
|
const actionableMessageClassName = classnames(
|
|
'actionable-message',
|
|
typeHash[type],
|
|
withRightButton ? CLASSNAME_WITH_RIGHT_BUTTON : null,
|
|
className,
|
|
);
|
|
|
|
return (
|
|
<div className={actionableMessageClassName}>
|
|
{infoTooltipText && (
|
|
<InfoTooltip
|
|
position="left"
|
|
contentText={infoTooltipText}
|
|
wrapperClassName="actionable-message__info-tooltip-wrapper"
|
|
/>
|
|
)}
|
|
<div className="actionable-message__message">{message}</div>
|
|
{(primaryAction || secondaryAction) && (
|
|
<div className="actionable-message__actions">
|
|
{primaryAction && (
|
|
<button
|
|
className={classnames(
|
|
'actionable-message__action',
|
|
'actionable-message__action--primary',
|
|
)}
|
|
onClick={primaryAction.onClick}
|
|
>
|
|
{primaryAction.label}
|
|
</button>
|
|
)}
|
|
{secondaryAction && (
|
|
<button
|
|
className={classnames(
|
|
'actionable-message__action',
|
|
'actionable-message__action--secondary',
|
|
)}
|
|
onClick={secondaryAction.onClick}
|
|
>
|
|
{secondaryAction.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ActionableMessage.propTypes = {
|
|
message: PropTypes.node.isRequired,
|
|
primaryAction: PropTypes.shape({
|
|
label: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}),
|
|
secondaryAction: PropTypes.shape({
|
|
label: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}),
|
|
className: PropTypes.string,
|
|
type: PropTypes.string,
|
|
withRightButton: PropTypes.bool,
|
|
infoTooltipText: PropTypes.string,
|
|
};
|