From 397e3a2c7fb1a4ad4bb92713a8b72a658dda4194 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 19 Oct 2020 05:54:59 -0230 Subject: [PATCH] Update swaps network fee tooltip (#9614) * Update network fee tooltip in fee-card to match latest designs * Clean up css classes and div --- app/_locales/en/messages.json | 10 ++++++- ui/app/components/ui/info-tooltip/index.scss | 19 ++++++++---- .../ui/info-tooltip/info-tooltip.js | 12 ++++++-- ui/app/pages/swaps/fee-card/fee-card.js | 30 +++++++++++++++---- ui/app/pages/swaps/fee-card/index.scss | 21 ++++++++++++- 5 files changed, 77 insertions(+), 15 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 3188d7894..edac431a5 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1643,6 +1643,10 @@ "swapEstimatedNetworkFee": { "message": "Estimated network fee" }, + "swapEstimatedNetworkFeeSummary": { + "message": "The “$1” is what we expect the actual fee to be. The exact amount depends on network conditions.", + "description": "$1 will be the translation of swapEstimatedNetworkFee, with the font bolded" + }, "swapEstimatedNetworkFees": { "message": "Estimated network fees" }, @@ -1677,6 +1681,9 @@ "swapFinalizing": { "message": "Finalizing..." }, + "swapGasFeeSummary": { + "message": "The gas fee covers the cost of processing your swap and storing it on the Ethereum network. MetaMask does not profit from this fee." + }, "swapGetQuotes": { "message": "Get quotes" }, @@ -1705,7 +1712,8 @@ "message": "Transaction may fail, max slippage too low." }, "swapMaxNetworkFeeInfo": { - "message": "The Max network fee is the most you’ll pay to complete your transaction. The max fee helps ensure your Swap has the best chance of succeeding. MetaMask does not profit from network fees." + "message": "“$1” is the most you’ll spend. When the network is volatile this can be a large amount.", + "description": "$1 will be the translation of swapMaxNetworkFees, with the font bolded" }, "swapMaxNetworkFees": { "message": "Max network fee" diff --git a/ui/app/components/ui/info-tooltip/index.scss b/ui/app/components/ui/info-tooltip/index.scss index ba0ca6259..cdc52fb97 100644 --- a/ui/app/components/ui/info-tooltip/index.scss +++ b/ui/app/components/ui/info-tooltip/index.scss @@ -5,24 +5,29 @@ } } -.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow] { +.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow], +.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] { border-top-color: $white; } -.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow] { +.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow], +.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] { border-right-color: $white; } -.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow] { +.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow], +.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] { border-left-color: $white; } -.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow] { +.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow], +.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] { border-bottom-color: $white; } .tippy-tooltip { - &#{&}-info-theme { + &#{&}-info-theme, + &#{&}-wideInfo-theme { background: white; color: black; box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); @@ -38,4 +43,8 @@ color: $Grey-500; } } + + &#{&}-wideInfo-theme { + max-width: 260px; + } } diff --git a/ui/app/components/ui/info-tooltip/info-tooltip.js b/ui/app/components/ui/info-tooltip/info-tooltip.js index 73bf356c5..42b8af75d 100644 --- a/ui/app/components/ui/info-tooltip/info-tooltip.js +++ b/ui/app/components/ui/info-tooltip/info-tooltip.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import classnames from 'classnames' import Tooltip from '../tooltip' const positionArrowClassMap = { @@ -12,17 +13,21 @@ const positionArrowClassMap = { export default function InfoTooltip ({ contentText = '', position = '', + containerClassName, + wrapperClassName, + wide, }) { return (
@@ -33,4 +38,7 @@ export default function InfoTooltip ({ InfoTooltip.propTypes = { contentText: PropTypes.string, position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']), + wide: PropTypes.bool, + containerClassName: PropTypes.string, + wrapperClassName: PropTypes.string, } diff --git a/ui/app/pages/swaps/fee-card/fee-card.js b/ui/app/pages/swaps/fee-card/fee-card.js index 61c173015..67f2ee807 100644 --- a/ui/app/pages/swaps/fee-card/fee-card.js +++ b/ui/app/pages/swaps/fee-card/fee-card.js @@ -22,6 +22,30 @@ export default function FeeCard ({
{t('swapEstimatedNetworkFee')}
+ +

{ t('swapGasFeeSummary') }

+

{ t('swapEstimatedNetworkFeeSummary', [ + + { t('swapEstimatedNetworkFee') } + , + ]) } +

+

{ t('swapMaxNetworkFeeInfo', [ + + { t('swapMaxNetworkFees') } + , + ]) } +

+ + ) + } + containerClassName="fee-card__info-tooltip-content-container" + wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" + wide + />
@@ -42,12 +66,6 @@ export default function FeeCard ({
{t('edit')}
-
- -
diff --git a/ui/app/pages/swaps/fee-card/index.scss b/ui/app/pages/swaps/fee-card/index.scss index 79e08c4ad..262b7a5eb 100644 --- a/ui/app/pages/swaps/fee-card/index.scss +++ b/ui/app/pages/swaps/fee-card/index.scss @@ -27,7 +27,7 @@ &__row-header-text, &__row-header-text--bold { - margin-right: 6px; + margin-right: 4px; cursor: pointer; } @@ -56,6 +56,21 @@ } } + &__info-tooltip-container { + height: 10px; + width: 10px; + justify-content: center; + margin-top: 2px; + } + + &__info-tooltip-paragraph { + margin-bottom: 8px; + } + + &__info-tooltip-paragraph:last-of-type { + margin-bottom: 0; + } + &__row-fee { margin-right: 4px; } @@ -109,6 +124,10 @@ &__row-header-primary--bold { font-weight: bold; } + + &__bold { + font-weight: bold; + } } .info-tooltip {