mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Update view-quote designs to better represent the metamask fee (#9633)
* Update view-quote designs to better represent the metamask fee * Code clean up * Copy updates
This commit is contained in:
parent
d44c03b882
commit
c8526bc687
@ -1729,7 +1729,7 @@
|
||||
"message": "MetaMask fee"
|
||||
},
|
||||
"swapMetaMaskFeeDescription": {
|
||||
"message": "A service fee of $1% is automatically factored into each quote, which supports ongoing development to make MetaMask even better.",
|
||||
"message": "We find the best price from the top liquidity sources, every time. A fee of $1% is automatically factored into each quote, which supports ongoing development to make MetaMask even better.",
|
||||
"description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
|
||||
},
|
||||
"swapNQuotesAvailable": {
|
||||
@ -1753,6 +1753,10 @@
|
||||
"swapQuoteDetailsSlippageInfo": {
|
||||
"message": "If the price changes between the time your order is placed and confirmed it’s called \"slippage\". Your Swap will automatically cancel if slippage exceeds your \"max slippage\" setting."
|
||||
},
|
||||
"swapQuoteIncludesRate": {
|
||||
"message": "Quote includes a $1% MetaMask fee",
|
||||
"description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
|
||||
},
|
||||
"swapQuoteNofN": {
|
||||
"message": "Quote $1 of $2",
|
||||
"description": "A count of loaded quotes shown to the user while they are waiting for quotes to be fetched. $1 is the number of quotes already loaded, and $2 is the total number of quotes to load."
|
||||
|
@ -22,7 +22,7 @@
|
||||
|
||||
&__quote-backdrop {
|
||||
width: 310px;
|
||||
height: 179.15px;
|
||||
height: 164px;
|
||||
}
|
||||
|
||||
&__details {
|
||||
@ -49,13 +49,14 @@
|
||||
}
|
||||
|
||||
&__quote-details-top {
|
||||
height: 137px;
|
||||
height: 94px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
padding-top: 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
@ -5,13 +5,13 @@ export default function QuotesBackdrop ({
|
||||
withTopTab,
|
||||
}) {
|
||||
return (
|
||||
<svg width="311" height="199" viewBox="25.5 29.335899353027344 311 199"fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="311" height="164" viewBox="25.5 29.335899353027344 311 164" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M25.5 57.5046C25.5 53.0864 29.0817 49.5046 33.5 49.5046H328.5C332.918 49.5046 336.5 53.0864 336.5 57.5046V221.005C336.5 225.423 332.918 229.005 328.5 229.005H33.5C29.0817 229.005 25.5 225.423 25.5 221.005V57.5046Z" fill="url(#paint0_linear)" />
|
||||
{withTopTab && <path d="M121.705 34.8352C122.929 31.816 125.861 29.8406 129.119 29.8406H230.883C234.141 29.8406 237.073 31.816 238.297 34.8352L251.468 62.9263C253.601 68.1861 249.73 73.9317 244.054 73.9317H115.948C110.272 73.9317 106.401 68.1861 108.534 62.9263L121.705 34.8352Z" fill="url(#paint1_linear)" />}
|
||||
<path d="M25.4749 54C25.4749 49.5817 29.0566 46 33.4749 46H328.475C332.893 46 336.475 49.5817 336.475 54V185.5C336.475 189.918 332.893 193.5 328.475 193.5H33.4749C29.0566 193.5 25.4749 189.918 25.4749 185.5V54Z" fill="url(#paint0_linear)" />
|
||||
{withTopTab && <path d="M132.68 34.3305C133.903 31.3114 136.836 29.3359 140.094 29.3359H219.858C223.116 29.3359 226.048 31.3114 227.272 34.3305L237.443 59.4217C239.575 64.6815 235.705 70.4271 230.029 70.4271H129.922C124.247 70.4271 120.376 64.6814 122.508 59.4217L132.68 34.3305Z" fill="url(#paint1_linear)" />}
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="-13.5" y="0.840576" width="389" height="277.164" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<filter id="filter0_d" x="-13.5251" y="0.335938" width="389" height="242.164" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
|
||||
<feOffset dy="10" />
|
||||
@ -20,11 +20,11 @@ export default function QuotesBackdrop ({
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="25.5" y1="94.1976" x2="342.259" y2="94.1976" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint0_linear" x1="25.4749" y1="90.693" x2="342.234" y2="90.693" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#037DD6" />
|
||||
<stop offset="0.994792" stopColor="#1098FC" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="25.5" y1="94.1976" x2="342.259" y2="94.1976" gradientUnits="userSpaceOnUse">
|
||||
<linearGradient id="paint1_linear" x1="25.4749" y1="90.693" x2="342.234" y2="90.693" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#037DD6" />
|
||||
<stop offset="0.994792" stopColor="#1098FC" />
|
||||
</linearGradient>
|
||||
|
@ -13,6 +13,7 @@
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
overflow-y: auto;
|
||||
@ -38,16 +39,11 @@
|
||||
|
||||
&__view-other-button-container {
|
||||
border-radius: 28px;
|
||||
margin-top: 38px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__view-other-button,
|
||||
@ -131,13 +127,9 @@
|
||||
|
||||
&__fee-card-container {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -158,4 +150,19 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__metamask-rate {
|
||||
display: flex;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
&__metamask-rate-text {
|
||||
@include H7;
|
||||
|
||||
color: $Grey-500;
|
||||
}
|
||||
|
||||
&__metamask-rate-info-icon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
@ -72,6 +72,7 @@ import { useTokenTracker } from '../../../hooks/useTokenTracker'
|
||||
import { QUOTES_EXPIRED_ERROR } from '../../../helpers/constants/swaps'
|
||||
import CountdownTimer from '../countdown-timer'
|
||||
import SwapsFooter from '../swaps-footer'
|
||||
import InfoTooltip from '../../../components/ui/info-tooltip'
|
||||
|
||||
export default function ViewQuote () {
|
||||
const history = useHistory()
|
||||
@ -199,6 +200,7 @@ export default function ViewQuote () {
|
||||
sourceTokenDecimals,
|
||||
sourceTokenSymbol,
|
||||
sourceTokenValue,
|
||||
metaMaskFee,
|
||||
} = renderableDataForUsedQuote
|
||||
|
||||
const { feeInFiat, feeInEth } = getRenderableGasFeesForQuote(
|
||||
@ -494,6 +496,14 @@ export default function ViewQuote () {
|
||||
<i className="fa fa-arrow-right" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="view-quote__metamask-rate">
|
||||
<p className="view-quote__metamask-rate-text">{ t('swapQuoteIncludesRate', [metaMaskFee]) }</p>
|
||||
<InfoTooltip
|
||||
position="top"
|
||||
contentText={t('swapMetaMaskFeeDescription', [metaMaskFee])}
|
||||
wrapperClassName="view-quote__metamask-rate-info-icon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classnames('view-quote__fee-card-container', {
|
||||
'view-quote__fee-card-container--thin': showWarning,
|
||||
|
Loading…
Reference in New Issue
Block a user