aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan Miller <danjm.com@gmail.com>2018-10-25 11:55:39 +0800
committerDan Miller <danjm.com@gmail.com>2018-12-04 11:36:05 +0800
commit3162a2747c0e54f729405caaef777519e4ded4dc (patch)
tree8a4b827f2fadddd1a6e12eddd3f0b05a15c67832
parent3ced3c9b2ab75038163f82eb77fbf97ea78d2342 (diff)
downloadtangerine-wallet-browser-3162a2747c0e54f729405caaef777519e4ded4dc.tar.gz
tangerine-wallet-browser-3162a2747c0e54f729405caaef777519e4ded4dc.tar.zst
tangerine-wallet-browser-3162a2747c0e54f729405caaef777519e4ded4dc.zip
Redesign of gas customization basic tab.
-rw-r--r--app/_locales/en/messages.json3
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js6
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss25
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js1
-rw-r--r--ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js4
-rw-r--r--ui/app/components/gas-customization/gas-price-button-group/index.scss96
-rw-r--r--ui/app/selectors/custom-gas.js3
-rw-r--r--ui/app/selectors/tests/custom-gas.test.js6
8 files changed, 134 insertions, 10 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 31a2f0826..69b9969be 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -448,6 +448,9 @@
"fast": {
"message": "Fast"
},
+ "fastest": {
+ "message": "FASTEST"
+ },
"feeChartTitle": {
"message": "Live Transaction Fee Predictions"
},
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
index 0e5f15519..4483b71df 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -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>
)
}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
index b7b6c0f94..e34e4e328 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@@ -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;
}
}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 426f940d1..d098d49cc 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -32,7 +32,6 @@ import {
getDefaultActiveButtonIndex,
getEstimatedGasPrices,
getEstimatedGasTimes,
- getPriceAndTimeEstimates,
getRenderableBasicEstimateData,
} from '../../../selectors/custom-gas'
import {
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
index 62ebb512d..8ad063b21 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
+++ b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
@@ -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>)
}
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss
index 7647c42c0..22661ed7b 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss
@@ -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;
+ }
+ }
+}
diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js
index 46bf06efc..1c577c1b4 100644
--- a/ui/app/selectors/custom-gas.js
+++ b/ui/app/selectors/custom-gas.js
@@ -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),
diff --git a/ui/app/selectors/tests/custom-gas.test.js b/ui/app/selectors/tests/custom-gas.test.js
index 1099670f2..8a6e7e351 100644
--- a/ui/app/selectors/tests/custom-gas.test.js
+++ b/ui/app/selectors/tests/custom-gas.test.js
@@ -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',