mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Redesign of gas customization basic tab.
This commit is contained in:
Dan Miller
parent
3ced3c9b2a
commit
3162a2747c
@ -448,6 +448,9 @@
|
||||
"fast": {
|
||||
"message": "Fast"
|
||||
},
|
||||
"fastest": {
|
||||
"message": "FASTEST"
|
||||
},
|
||||
"feeChartTitle": {
|
||||
"message": "Live Transaction Fee Predictions"
|
||||
},
|
||||
|
||||
@ -14,12 +14,14 @@ export default class BasicTabContent extends Component {
|
||||
render () {
|
||||
return (
|
||||
<div className="basic-tab-content">
|
||||
<div className="basic-tab-content__title">Suggest gas fee increases</div>
|
||||
<div className="basic-tab-content__title">Estimated Processing Times</div>
|
||||
<div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div>
|
||||
<GasPriceButtonGroup
|
||||
className="gas-price-button-group"
|
||||
className="gas-price-button-group--alt"
|
||||
showCheck={true}
|
||||
{...this.props.gasPriceButtonGroupProps}
|
||||
/>
|
||||
<div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
.basic-tab-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 22px;
|
||||
height: 291px;
|
||||
align-items: flex-start;
|
||||
padding-left: 21px;
|
||||
height: 324px;
|
||||
background: #F5F7F8;
|
||||
border-bottom: 1px solid #d2d8dd;
|
||||
|
||||
&__title {
|
||||
margin-top: 19px;
|
||||
font-size: 20px;
|
||||
color: $scorpion;
|
||||
font-size: 16px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&__blurb {
|
||||
font-size: 12px;
|
||||
color: $black;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__footer-blurb {
|
||||
font-size: 12px;
|
||||
color: #979797;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,6 @@ import {
|
||||
getDefaultActiveButtonIndex,
|
||||
getEstimatedGasPrices,
|
||||
getEstimatedGasTimes,
|
||||
getPriceAndTimeEstimates,
|
||||
getRenderableBasicEstimateData,
|
||||
} from '../../../selectors/custom-gas'
|
||||
import {
|
||||
|
||||
@ -38,10 +38,10 @@ export default class GasPriceButtonGroup extends Component {
|
||||
}) {
|
||||
return (<div>
|
||||
{ labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
|
||||
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
|
||||
{ feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
|
||||
{ feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
|
||||
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
|
||||
{ showCheck && <i className="fa fa-check fa-2x" /> }
|
||||
{ showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
@ -125,3 +125,99 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gas-price-button-group--alt {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
max-width: 342px;
|
||||
|
||||
&__button-fiat-price {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&__button-label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__primary-currency {
|
||||
font-size: 11px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&__secondary-currency {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__loading-container {
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
&__time-estimate {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.button-group__button, .button-group__button--active {
|
||||
height: 78px;
|
||||
background: white;
|
||||
color: #2A4055;
|
||||
width: 108px;
|
||||
height: 97px;
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.151579);
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-flow: column;;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button-check-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group__button--active {
|
||||
background: #F7FCFF;
|
||||
border: 2px solid #2C8BDC;
|
||||
|
||||
.button-check-wrapper {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: -10px;
|
||||
background: #D5ECFA;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
color: $curious-blue;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,18 +189,21 @@ function getRenderableBasicEstimateData (state) {
|
||||
|
||||
return [
|
||||
{
|
||||
labelKey: 'fastest',
|
||||
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate),
|
||||
feeInSecondaryCurrency: getRenderableEthFee(fast, gasLimit),
|
||||
timeEstimate: getRenderableTimeEstimate(fastWait, blockTime),
|
||||
priceInHexWei: getGasPriceInHexWei(fast),
|
||||
},
|
||||
{
|
||||
labelKey: 'fast',
|
||||
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(average, gasLimit, currentCurrency, conversionRate),
|
||||
feeInSecondaryCurrency: getRenderableEthFee(average, gasLimit),
|
||||
timeEstimate: getRenderableTimeEstimate(avgWait, blockTime),
|
||||
priceInHexWei: getGasPriceInHexWei(average),
|
||||
},
|
||||
{
|
||||
labelKey: 'slow',
|
||||
feeInPrimaryCurrency: getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate),
|
||||
feeInSecondaryCurrency: getRenderableEthFee(safeLow, gasLimit),
|
||||
timeEstimate: getRenderableTimeEstimate(safeLowWait, blockTime),
|
||||
|
||||
@ -77,18 +77,21 @@ describe('custom-gas selectors', () => {
|
||||
{
|
||||
expectedResult: [
|
||||
{
|
||||
labelKey: 'fastest',
|
||||
feeInPrimaryCurrency: '$0.05',
|
||||
feeInSecondaryCurrency: '0.00021 ETH',
|
||||
timeEstimate: '~7 sec',
|
||||
priceInHexWei: '0x2540be400',
|
||||
},
|
||||
{
|
||||
labelKey: 'fast',
|
||||
feeInPrimaryCurrency: '$0.03',
|
||||
feeInSecondaryCurrency: '0.000105 ETH',
|
||||
timeEstimate: '~46 sec',
|
||||
priceInHexWei: '0x12a05f200',
|
||||
},
|
||||
{
|
||||
labelKey: 'slow',
|
||||
feeInPrimaryCurrency: '$0.01',
|
||||
feeInSecondaryCurrency: '0.0000525 ETH',
|
||||
timeEstimate: '~1 min 33 sec',
|
||||
@ -119,18 +122,21 @@ describe('custom-gas selectors', () => {
|
||||
{
|
||||
expectedResult: [
|
||||
{
|
||||
labelKey: 'fastest',
|
||||
feeInPrimaryCurrency: '$1.07',
|
||||
feeInSecondaryCurrency: '0.00042 ETH',
|
||||
timeEstimate: '~14 sec',
|
||||
priceInHexWei: '0x4a817c800',
|
||||
},
|
||||
{
|
||||
labelKey: 'fast',
|
||||
feeInPrimaryCurrency: '$0.54',
|
||||
feeInSecondaryCurrency: '0.00021 ETH',
|
||||
timeEstimate: '~1 min 33 sec',
|
||||
priceInHexWei: '0x2540be400',
|
||||
},
|
||||
{
|
||||
labelKey: 'slow',
|
||||
feeInPrimaryCurrency: '$0.27',
|
||||
feeInSecondaryCurrency: '0.000105 ETH',
|
||||
timeEstimate: '~3 min 7 sec',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user