m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

1559 v2 tooltips (#12750)

Browse Source 
* add tooltips
This commit is contained in:
Alex Donesky 2021-12-03 09:44:23 -06:00 committed by GitHub
parent 56c91262e9
commit 6542d16349
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 337 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/_locales/en/messages.json
View File

@ -637,6 +637,10 @@
"customGas": {
"message": "Customize Gas"
},
"customGasSettingToolTipMessage": {
"message": "Use $1 to customise the gas price. This can be confusing if you aren’t familiar. Interact at your own risk.",
"description": "$1 is key 'advanced' (text: 'Advanced') separated here so that it can be passed in with bold fontweight"
},
"customGasSubTitle": {
"message": "Increasing fee may decrease processing times, but it is not guaranteed."
},
@ -649,6 +653,10 @@
"dappSuggested": {
"message": "Site suggested"
},
"dappSuggestedGasSettingToolTipMessage": {
"message": "$1 has suggested this price.",
"description": "$1 is url for the dapp that has suggested gas settings"
},
"dappSuggestedShortLabel": {
"message": "Site"
},
@ -1258,6 +1266,13 @@
"high": {
"message": "Aggressive"
},
"highGasSettingToolTipDialog": {
"message": "High probability, even in volatile markets"
},
"highGasSettingToolTipMessage": {
"message": "Use $1 to cover surges in network traffic due to things like popular NFT drops.",
"description": "$1 is key 'high' (text: 'Aggressive') separated here so that it can be passed in with bold fontweight"
},
"history": {
"message": "History"
},
@ -1513,6 +1528,10 @@
"low": {
"message": "Low"
},
"lowGasSettingToolTipMessage": {
"message": "Use $1 to wait for a cheaper price. Time estimates are much less accurate as prices are somewhat unpredicible.",
"description": "$1 is key 'low' separated here so that it can be passed in with bold fontweight"
},
"lowPriorityMessage": {
"message": "Future transactions will queue after this one. This price was last seen was some time ago."
},
@ -1541,6 +1560,10 @@
"medium": {
"message": "Market"
},
"mediumGasSettingToolTipMessage": {
"message": "Use $1 for fast processing at current market price.",
"description": "$1 is key 'medium' (text: 'Market') separated here so that it can be passed in with bold fontweight"
},
"memo": {
"message": "memo"
},

1
app/images/curve-high.svg Normal file
View File

@ -0,0 +1 @@
<svg width="136" height="31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M91.201 8.705h1.03l2.39 5.65 2.4-5.65h1.01l-3.02 7.1h-.78l-3.03-7.1Zm9.327 7.2a2.73 2.73 0 0 1-1.06-.2 2.431 2.431 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.063-.707.19-1.02.126-.32.303-.597.53-.83.233-.234.51-.417.83-.55.32-.134.67-.2 1.05-.2.326 0 .633.056.92.17.286.106.536.27.75.49.22.213.393.476.52.79.126.306.19.66.19 1.06v.13c0 .033-.004.076-.01.13h-4.1c.006.233.053.45.14.65.093.2.213.373.36.52.153.146.333.263.54.35.213.08.443.12.69.12.386 0 .703-.077.95-.23a1.82 1.82 0 0 0 .61-.64l.68.47a2.48 2.48 0 0 1-.91.87c-.374.213-.82.32-1.34.32Zm1.51-3.13a1.601 1.601 0 0 0-.19-.55c-.087-.16-.2-.297-.34-.41a1.431 1.431 0 0 0-.46-.26 1.645 1.645 0 0 0-.54-.09 1.73 1.73 0 0 0-1.04.35 1.5 1.5 0 0 0-.38.41c-.107.16-.18.343-.22.55h3.17Zm2.1-1.97h.86v.97c.047-.16.12-.304.22-.43a1.556 1.556 0 0 1 .74-.52c.147-.047.294-.07.44-.07.134 0 .264.013.39.04v.89a.78.78 0 0 0-.23-.06 1.342 1.342 0 0 0-.24-.02c-.16 0-.32.036-.48.11-.153.066-.293.17-.42.31-.12.14-.22.32-.3.54-.08.213-.12.466-.12.76v2.48h-.86v-5Zm4.032 7.09 1.09-2.35-2.19-4.74h.95l1.72 3.8 1.71-3.8h.96l-3.28 7.09h-.96Zm7.287-2.09v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .536.046.77.14.233.093.43.23.59.41.166.173.296.386.39.64.093.246.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.214-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.174.08-.327.2-.46.36-.127.153-.23.343-.31.57-.074.226-.11.486-.11.78v2.48h-.86Zm6.328-6.34a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.267-.18.44-.18a.602.602 0 0 1 .6.61c0 .173-.056.32-.17.44a.581.581 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5Zm4.671 4.19c.246 0 .473-.044.68-.13.213-.087.393-.207.54-.36.146-.16.26-.347.34-.56.086-.214.13-.447.13-.7 0-.247-.044-.477-.13-.69a1.588 1.588 0 0 0-.34-.56 1.542 1.542 0 0 0-.54-.36 1.637 1.637 0 0 0-.68-.14c-.254 0-.484.046-.69.14a1.548 1.548 0 0 0-.53.36c-.147.153-.264.34-.35.56-.08.213-.12.443-.12.69 0 .253.04.486.12.7.086.213.203.4.35.56.146.153.323.273.53.36.206.086.436.13.69.13Zm-.05 3c-.54 0-1.014-.1-1.42-.3-.407-.2-.717-.44-.93-.72l.6-.6c.2.253.443.456.73.61.293.153.633.23 1.02.23.213 0 .42-.034.62-.1.2-.067.376-.174.53-.32.16-.14.286-.32.38-.54.093-.214.14-.47.14-.77v-.57a2.032 2.032 0 0 1-.72.63c-.307.166-.647.25-1.02.25-.347 0-.67-.064-.97-.19-.3-.134-.56-.314-.78-.54a2.623 2.623 0 0 1-.52-.81 2.8 2.8 0 0 1-.18-1.01c0-.354.06-.684.18-.99.126-.314.3-.584.52-.81.22-.234.48-.414.78-.54.3-.134.623-.2.97-.2.373 0 .713.083 1.02.25.306.16.546.366.72.62v-.77h.86v4.71c0 .42-.067.783-.2 1.09-.127.313-.304.57-.53.77-.227.206-.494.36-.8.46-.307.106-.64.16-1 .16Zm4.149-2.19v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .537.046.77.14.233.093.43.23.59.41.167.173.297.386.39.64.093.246.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.327.2-.46.36-.127.153-.23.343-.31.57-.073.226-.11.486-.11.78v2.48h-.86Z" fill="#F66A0A"/><path opacity=".3" d="M19.506 22.805c-10.763 7.42-19.416 8-19.416 8h110.25s-8.653-.58-19.417-8c-10.763-7.42-23.363-22-35.708-22-12.345 0-24.945 14.58-35.709 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="111" height="31"><path d="M19.506 22.672c-10.763 7.42-19.416 8-19.416 8h110.25s-8.653-.58-19.417-8c-10.763-7.42-23.363-22-35.708-22-12.345 0-24.945 14.58-35.709 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M91.986-5.143h20.706v39.25H91.986z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

1
app/images/curve-low.svg Normal file
View File

@ -0,0 +1 @@
<svg width="125" height="31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.233 8.738h.93v6.22h3.43v.88h-4.36v-7.1Zm7.412 7.2c-.38 0-.73-.067-1.05-.2a2.679 2.679 0 0 1-.83-.56 2.569 2.569 0 0 1-.55-.82c-.126-.32-.19-.66-.19-1.02s.064-.697.19-1.01a2.54 2.54 0 0 1 .55-.83c.234-.233.51-.417.83-.55.32-.14.67-.21 1.05-.21.374 0 .72.07 1.04.21.32.133.597.317.83.55.234.233.414.51.54.83.134.313.2.65.2 1.01s-.066.7-.2 1.02a2.44 2.44 0 0 1-.54.82 2.68 2.68 0 0 1-.83.56c-.32.133-.666.2-1.04.2Zm0-.8c.26 0 .497-.047.71-.14.214-.093.394-.22.54-.38.154-.167.27-.357.35-.57.087-.22.13-.457.13-.71 0-.247-.043-.48-.13-.7-.08-.22-.196-.41-.35-.57a1.52 1.52 0 0 0-.54-.39 1.754 1.754 0 0 0-.71-.14c-.26 0-.496.047-.71.14a1.619 1.619 0 0 0-.55.39c-.153.16-.273.35-.36.57-.08.22-.12.453-.12.7 0 .253.04.49.12.71.087.213.207.403.36.57.154.16.337.287.55.38.214.093.45.14.71.14Zm6.825-2.89-1.23 3.59h-.76l-1.7-5h.9l1.21 3.65 1.25-3.65h.66l1.25 3.65 1.21-3.65h.91l-1.7 5h-.76l-1.24-3.59Z" fill="#F66A0A"/><path opacity=".3" d="M33.96 22.838c-10.764 7.42-19.417 8-19.417 8h110.25s-8.653-.58-19.416-8c-10.764-7.42-23.364-22-35.709-22-12.345 0-24.945 14.58-35.709 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="0" width="111" height="31"><path d="M33.96 22.705c-10.764 7.42-19.417 8-19.417 8h110.25s-8.653-.58-19.416-8c-10.764-7.42-23.364-22-35.709-22-12.345 0-24.945 14.58-35.709 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M12.793 16.838h20.706v17.303H12.793z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
app/images/curve-medium.svg Normal file
View File

@ -0,0 +1 @@
<svg width="111" height="49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m38 4.334 2.63 3.54 2.65-3.54h.84v7.1h-.92v-5.52l-2.56 3.44-2.56-3.44v5.52h-.93v-7.1H38Zm9.99 7.2a2.73 2.73 0 0 1-1.06-.2 2.431 2.431 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.063-.707.19-1.02.126-.32.303-.597.53-.83.233-.234.51-.417.83-.55.32-.134.67-.2 1.05-.2.326 0 .633.056.92.17.286.106.536.27.75.49.22.213.393.476.52.79.126.306.19.66.19 1.06v.13c0 .033-.004.076-.01.13h-4.1c.006.233.053.45.14.65.093.2.213.373.36.52.153.146.333.263.54.35.213.08.443.12.69.12.386 0 .703-.077.95-.23.253-.16.456-.374.61-.64l.68.47c-.227.366-.53.656-.91.87-.374.213-.82.32-1.34.32Zm1.51-3.13a1.579 1.579 0 0 0-.19-.55c-.087-.16-.2-.297-.34-.41a1.419 1.419 0 0 0-.46-.26 1.639 1.639 0 0 0-.54-.09 1.729 1.729 0 0 0-1.04.35 1.5 1.5 0 0 0-.38.41c-.107.16-.18.343-.22.55h3.17Zm4.16 3.13c-.353 0-.68-.067-.98-.2a2.57 2.57 0 0 1-.77-.56 2.73 2.73 0 0 1-.52-.83 2.8 2.8 0 0 1-.18-1.01c0-.36.06-.697.18-1.01.127-.314.3-.587.52-.82a2.359 2.359 0 0 1 1.75-.77c.38 0 .727.086 1.04.26.314.166.554.37.72.61v-3.27h.86v7.5h-.86v-.77a2.08 2.08 0 0 1-.72.62 2.18 2.18 0 0 1-1.04.25Zm.13-.79a1.607 1.607 0 0 0 1.22-.52c.154-.167.27-.36.35-.58.087-.22.13-.457.13-.71 0-.254-.043-.49-.13-.71-.08-.22-.196-.41-.35-.57a1.544 1.544 0 0 0-.53-.39 1.658 1.658 0 0 0-.69-.14c-.253 0-.486.046-.7.14a1.648 1.648 0 0 0-.54.39 1.82 1.82 0 0 0-.35.57c-.08.22-.12.456-.12.71 0 .253.04.49.12.71.087.22.204.413.35.58.154.16.334.286.54.38.214.093.447.14.7.14Zm4.55-5.65a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.172 0 .316.06.43.18.112.12.17.263.17.43 0 .173-.058.32-.17.44a.583.583 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5Zm4.26 5.1c-.274 0-.524-.047-.75-.14-.227-.1-.42-.237-.58-.41a1.917 1.917 0 0 1-.38-.63 2.617 2.617 0 0 1-.13-.85v-3.07h.86v2.94c0 .42.1.753.3 1 .206.246.483.37.83.37.193 0 .373-.04.54-.12.173-.087.32-.207.44-.36.126-.16.226-.354.3-.58.073-.227.11-.484.11-.77v-2.48h.86v5h-.86v-.77a1.654 1.654 0 0 1-.66.66c-.267.14-.56.21-.88.21Zm10.46-3.04c0-.407-.083-.737-.25-.99-.166-.254-.413-.38-.74-.38-.4 0-.726.156-.98.47-.246.313-.376.74-.39 1.28v2.56h-.86v-2.94c0-.407-.083-.737-.25-.99-.16-.254-.403-.38-.73-.38-.406 0-.74.163-1 .49-.253.326-.38.773-.38 1.34v2.48h-.86v-5h.86v.77a1.63 1.63 0 0 1 .61-.63c.26-.16.56-.24.9-.24.374 0 .69.096.95.29.267.186.464.446.59.78.134-.327.344-.587.63-.78.294-.194.63-.29 1.01-.29.274 0 .517.05.73.15.22.093.404.23.55.41.154.173.27.386.35.64.08.246.12.523.12.83v3.07h-.86v-2.94Z" fill="#037DD6"/><path opacity=".3" d="M19.506 40.566c-10.763 7.42-19.416 8-19.416 8h110.25s-8.653-.58-19.417-8c-10.763-7.42-23.363-22-35.708-22-12.345 0-24.945 14.58-35.709 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="18" width="111" height="31"><path d="M19.506 40.434c-10.763 7.42-19.416 8-19.416 8h110.25s-8.653-.58-19.417-8c-10.763-7.42-23.363-22-35.708-22-12.345 0-24.945 14.58-35.709 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#037DD6" stroke="#fff" stroke-width="2" d="M36.047 12.619H73.39v39.25H36.047z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

1
ui/components/app/app-components.scss
View File

@ -18,6 +18,7 @@
@import 'edit-gas-fee-popover/network-status/index';
@import 'edit-gas-fee-popover/network-status/status-slider/index';
@import 'flask/snaps-authorship-pill/index';
@import 'edit-gas-fee-popover/edit-gas-tooltip/index';
@import 'gas-customization/gas-modal-page-container/index';
@import 'gas-customization/gas-price-button-group/index';
@import 'gas-customization/index';

19
ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
View File

@ -18,9 +18,10 @@ import { useGasFeeContext } from '../../../../contexts/gasFee';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useTransactionModalContext } from '../../../../contexts/transaction-modal';
import I18nValue from '../../../ui/i18n-value';
import InfoTooltip from '../../../ui/info-tooltip';
import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display';
import EditGasToolTip from '../edit-gas-tooltip/edit-gas-tooltip';
import InfoTooltip from '../../../ui/info-tooltip';
import { useCustomTimeEstimate } from './useCustomTimeEstimate';
const EditGasItem = ({ priorityLevel }) => {
@ -43,6 +44,8 @@ const EditGasItem = ({ priorityLevel }) => {
if (gasFeeEstimates?.[priorityLevel]) {
maxFeePerGas = gasFeeEstimates[priorityLevel].suggestedMaxFeePerGas;
maxPriorityFeePerGas =
gasFeeEstimates[priorityLevel].suggestedMaxPriorityFeePerGas;
} else if (
priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
dappSuggestedGasFees
@ -144,8 +147,18 @@ const EditGasItem = ({ priorityLevel }) => {
'--'
)}
</span>
<span className="edit-gas-item__tooltip">
<InfoTooltip position="top" />
<span className="edit-gas-item__tooltip" data-testid="gas-tooltip">
<InfoTooltip
contentText={
<EditGasToolTip
t={t}
priorityLevel={priorityLevel}
maxFeePerGas={maxFeePerGas}
maxPriorityFeePerGas={maxPriorityFeePerGas}
/>
}
position="top"
/>
</span>
</button>
);

142
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js Normal file
View File

@ -0,0 +1,142 @@
import React from 'react';
import PropTypes from 'prop-types';
import { PRIORITY_LEVELS } from '../../../../../shared/constants/gas';
import {
COLORS,
FONT_WEIGHT,
} from '../../../../helpers/constants/design-system';
import Typography from '../../../ui/typography';
import { useGasFeeContext } from '../../../../contexts/gasFee';
const EditGasToolTip = ({
priorityLevel,
// maxFeePerGas & maxPriorityFeePerGas are derived from conditional logic
// related to the source of the estimates. We pass these values from the
// the parent component (edit-gas-item) rather than recalculate them
maxFeePerGas,
maxPriorityFeePerGas,
t,
}) => {
const {
gasLimit,
maxFeePerGas: maxFeePerGasValue,
maxPriorityFeePerGas: maxPriorityFeePerGasValue,
transaction,
} = useGasFeeContext();
const toolTipMessage = () => {
switch (priorityLevel) {
case PRIORITY_LEVELS.LOW:
return t('lowGasSettingToolTipMessage', [
<span key={priorityLevel}>
<b>{t('low')}</b>
</span>,
]);
case PRIORITY_LEVELS.MEDIUM:
return t('mediumGasSettingToolTipMessage', [
<span key={priorityLevel}>
<b>{t('medium')}</b>
</span>,
]);
case PRIORITY_LEVELS.HIGH:
return t('highGasSettingToolTipMessage', [
<span key={priorityLevel}>
<b>{t('high')}</b>
</span>,
]);
case PRIORITY_LEVELS.CUSTOM:
return t('customGasSettingToolTipMessage', [
<span key={priorityLevel}>
<b>{t('custom')}</b>
</span>,
]);
case PRIORITY_LEVELS.DAPP_SUGGESTED:
return transaction?.origin
? t('dappSuggestedGasSettingToolTipMessage', [
<span key={transaction?.origin}>{transaction?.origin}</span>,
])
: null;
default:
return '';
}
};
return (
<div className="edit-gas-tooltip__container">
{priorityLevel !== PRIORITY_LEVELS.CUSTOM &&
priorityLevel !== PRIORITY_LEVELS.DAPP_SUGGESTED ? (
<img alt="" src={`./images/curve-${priorityLevel}.svg`} />
) : null}
{priorityLevel === PRIORITY_LEVELS.HIGH ? (
<div className="edit-gas-tooltip__container__dialog">
<Typography fontSize="12px" color={COLORS.WHITE}>
{t('highGasSettingToolTipDialog')}
</Typography>
</div>
) : null}
<div className="edit-gas-tooltip__container__message">
<Typography fontSize="12px">{toolTipMessage()}</Typography>
</div>
{priorityLevel === PRIORITY_LEVELS.CUSTOM ? null : (
<div className="edit-gas-tooltip__container__values">
<div>
<Typography
fontSize="12px"
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
{t('maxBaseFee')}
</Typography>
<Typography
fontSize="12px"
color={COLORS.NEUTRAL_GREY}
className="edit-gas-tooltip__container__value"
>
{maxFeePerGas ?? maxFeePerGasValue}
</Typography>
</div>
<div>
<Typography
fontSize="12px"
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
{t('priorityFee')}
</Typography>
<Typography
fontSize="12px"
color={COLORS.NEUTRAL_GREY}
className="edit-gas-tooltip__container__value"
>
{maxPriorityFeePerGas ?? maxPriorityFeePerGasValue}
</Typography>
</div>
<div>
<Typography
fontSize="12px"
fontWeight={FONT_WEIGHT.BOLD}
className="edit-gas-tooltip__container__label"
>
{t('gasLimit')}
</Typography>
<Typography
fontSize="12px"
color={COLORS.NEUTRAL_GREY}
className="edit-gas-tooltip__container__value"
>
{gasLimit}
</Typography>
</div>
</div>
)}
</div>
);
};
EditGasToolTip.propTypes = {
priorityLevel: PropTypes.string,
maxFeePerGas: PropTypes.string,
maxPriorityFeePerGas: PropTypes.string,
t: PropTypes.func,
};
export default EditGasToolTip;

97
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.test.js Normal file
View File

@ -0,0 +1,97 @@
import React from 'react';
import configureStore from '../../../../store/store';
import { renderWithProvider } from '../../../../../test/jest';
import { GasFeeContextProvider } from '../../../../contexts/gasFee';
import EditGasToolTip from './edit-gas-tooltip';
jest.mock('../../../../store/actions', () => ({
disconnectGasFeeEstimatePoller: jest.fn(),
getGasFeeEstimatesAndStartPolling: jest
.fn()
.mockImplementation(() => Promise.resolve()),
addPollingTokenToAppState: jest.fn(),
getGasFeeTimeEstimate: jest
.fn()
.mockImplementation(() => Promise.resolve('unknown')),
}));
const LOW_GAS_OPTION = {
maxFeePerGas: '2.010203381',
maxPriorityFeePerGas: '1.20004164',
};
const MEDIUM_GAS_OPTION = {
maxFeePerGas: '2.383812808',
maxPriorityFeePerGas: '1.5',
};
const HIGH_GAS_OPTION = {
maxFeePerGas: '2.920638342',
maxPriorityFeePerGas: '2',
};
const renderComponent = (props, transactionProps, gasFeeContextProps) => {
const mockStore = {
metamask: {
provider: {},
cachedBalances: {},
accounts: {
'0xAddress': {
address: '0xAddress',
balance: '0x176e5b6f173ebe66',
},
},
selectedAddress: '0xAddress',
featureFlags: { advancedInlineGas: true },
advancedGasFee: {
maxBaseFee: '1.5',
priorityFee: '2',
},
},
};
const store = configureStore(mockStore);
return renderWithProvider(
<GasFeeContextProvider
transaction={{ txParams: { gas: '0x5208' }, ...transactionProps }}
{...gasFeeContextProps}
>
<EditGasToolTip {...props} t={jest.fn()} />
</GasFeeContextProvider>,
store,
);
};
describe('EditGasToolTip', () => {
it('should render correct values for priorityLevel low', () => {
const { queryByText } = renderComponent({
priorityLevel: 'low',
...LOW_GAS_OPTION,
});
expect(queryByText('2.010203381')).toBeInTheDocument();
expect(queryByText('1.20004164')).toBeInTheDocument();
expect(queryByText('21000')).toBeInTheDocument();
});
it('should render correct values for priorityLevel medium', () => {
const { queryByText } = renderComponent({
priorityLevel: 'medium',
...MEDIUM_GAS_OPTION,
});
expect(queryByText('2.383812808')).toBeInTheDocument();
expect(queryByText('1.5')).toBeInTheDocument();
expect(queryByText('21000')).toBeInTheDocument();
});
it('should render correct values for priorityLevel high', () => {
const { queryByText } = renderComponent({
priorityLevel: 'high',
...HIGH_GAS_OPTION,
});
expect(queryByText('2.920638342')).toBeInTheDocument();
expect(queryByText('2')).toBeInTheDocument();
expect(queryByText('21000')).toBeInTheDocument();
});
});

53
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss Normal file
View File

@ -0,0 +1,53 @@
.edit-gas-tooltip {
display: inline-block;
text-align: right;
width: 10%;
&__container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
img {
margin-bottom: 8px;
}
&__message {
width: 100%;
}
&__dialog {
background-color: $Orange-500;
border-radius: 30px;
margin: 4px 0;
text-align: center;
padding: 4px;
}
&__label {
width: 50%;
}
&__value {
width: 50%;
}
p {
margin-bottom: 0 !important;
}
&__values {
width: 100%;
margin-top: 8px;
div {
display: flex;
flex-direction: row;
text-align: left;
}
}
}
}

1
ui/css/design-system/colors.scss
View File

@ -122,6 +122,7 @@ $color-map: (
'white': $ui-white,
'black': $ui-black,
'grey': $ui-grey,
'neutral-grey': $neutral-grey,
'primary-1': $primary-1,
'primary-2': $primary-2,
'primary-3': $primary-3,

1
ui/helpers/constants/design-system.js
View File

@ -11,6 +11,7 @@ export const COLORS = {
UI4: 'ui-4',
BLACK: 'black',
GREY: 'grey',
NEUTRAL_GREY: 'neutral-grey',
WHITE: 'white',
PRIMARY1: 'primary-1',
PRIMARY2: 'primary-2',