From c631f45ab763ad347be229dc461757f2b583167a Mon Sep 17 00:00:00 2001 From: James Prado Date: Wed, 24 Jan 2018 22:43:27 -0500 Subject: [PATCH] Improve Gas Price UX (Part 2) (#850) * Remove gas dropdown & Add gas sliders * Update styles * Revert changes made to requestpayment.tsx * Update style & add custom labels to GasLimitField * Update styles * Update confirm transaction modal * Revert "Update confirm transaction modal" This reverts commit 743c9a505fe070feb55f7af550ad918a3d8899d1. * Add transaction fee to tx confirmation modal * Update styles * Remove old gasPriceDropdown files & use network units in tx fee * Add option to lock gaslimit data * fix tslint errors * Rename lockData to readOnly * Add option to check if validAmount before generating transaction * Add nonce field if gas slider is readonly * Automatically set nonce in * Update snapshot * Move getNonceRequested to GasSlider component * Add optional to check value for isValidAmount selector * Add selector for transaction fee * Update GasSlider component & Rename to Gas * update snapshots * Fix subtabs className * Update styles * Remove dataField on contract interact * rename to --- .../AmountAndGasPrice/AmountAndGasPrice.tsx | 6 +- .../components/TransactionFee.tsx | 57 +++++++ .../AmountAndGasPrice/components/index.ts | 1 + common/components/GasLimitField.tsx | 42 ++++-- common/components/GasSlider/GasSlider.scss | 10 -- .../GasSlider/components/AdvancedGas.scss | 37 ----- .../GasSlider/components/AdvancedGas.tsx | 101 ------------- common/components/GasSlider/index.tsx | 2 - .../Header/components/GasPriceDropdown.scss | 38 ----- common/components/Header/index.tsx | 5 - common/components/NonceField.tsx | 4 +- common/components/SubTabs/index.tsx | 2 +- .../TXMetaDataPanel/TXMetaDataPanel.scss | 26 ++++ .../TXMetaDataPanel.tsx} | 64 +++++--- .../components/AdvancedGas.scss | 49 ++++++ .../components/AdvancedGas.tsx | 139 ++++++++++++++++++ .../components/FeeSummary.scss | 0 .../components/FeeSummary.tsx | 0 .../components/SimpleGas.scss | 33 +++-- .../components/SimpleGas.tsx | 18 +-- common/components/TXMetaDataPanel/index.tsx | 2 + .../components/DeterministicWalletsModal.scss | 4 +- .../components/DeterministicWalletsModal.tsx | 6 +- common/components/index.ts | 2 +- common/components/ui/SwapDropdown.scss | 16 +- .../Tabs/Contracts/components/Deploy.tsx | 32 ++-- .../InteractExplorer/components/Fields.tsx | 11 +- .../components/GasLimitField.tsx | 22 --- .../components/Fields/Fields.tsx | 4 +- .../components/RequestPayment.tsx | 13 +- .../Tabs/Swap/components/CurrencySwap.scss | 6 +- .../Tabs/Swap/components/CurrencySwap.tsx | 2 +- .../Tabs/Swap/components/LiteSend/Fields.tsx | 4 +- common/libs/transaction/utils/ether.ts | 6 + common/libs/transaction/utils/index.ts | 1 + common/sass/styles.scss | 1 + common/sass/styles/flexbox.scss | 12 ++ common/sass/styles/overrides/forms.scss | 1 - 38 files changed, 459 insertions(+), 320 deletions(-) create mode 100644 common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/TransactionFee.tsx delete mode 100644 common/components/GasSlider/GasSlider.scss delete mode 100644 common/components/GasSlider/components/AdvancedGas.scss delete mode 100644 common/components/GasSlider/components/AdvancedGas.tsx delete mode 100644 common/components/GasSlider/index.tsx delete mode 100644 common/components/Header/components/GasPriceDropdown.scss create mode 100644 common/components/TXMetaDataPanel/TXMetaDataPanel.scss rename common/components/{GasSlider/GasSlider.tsx => TXMetaDataPanel/TXMetaDataPanel.tsx} (55%) create mode 100644 common/components/TXMetaDataPanel/components/AdvancedGas.scss create mode 100644 common/components/TXMetaDataPanel/components/AdvancedGas.tsx rename common/components/{GasSlider => TXMetaDataPanel}/components/FeeSummary.scss (100%) rename common/components/{GasSlider => TXMetaDataPanel}/components/FeeSummary.tsx (100%) rename common/components/{GasSlider => TXMetaDataPanel}/components/SimpleGas.scss (64%) rename common/components/{GasSlider => TXMetaDataPanel}/components/SimpleGas.tsx (83%) create mode 100644 common/components/TXMetaDataPanel/index.tsx delete mode 100644 common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/GasLimitField.tsx create mode 100644 common/sass/styles/flexbox.scss diff --git a/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/AmountAndGasPrice.tsx b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/AmountAndGasPrice.tsx index 996ea9df..a8562022 100644 --- a/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/AmountAndGasPrice.tsx +++ b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/AmountAndGasPrice.tsx @@ -1,4 +1,4 @@ -import { GasPrice } from './components'; +import { TransactionFee } from './components'; import { Amount } from '../../Amount'; import React from 'react'; @@ -9,9 +9,9 @@ export const AmountAndGasPrice: React.SFC<{}> = () => ( {' '} - with a gas price of{' '} + with a transaction fee of{' '} - +

diff --git a/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/TransactionFee.tsx b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/TransactionFee.tsx new file mode 100644 index 00000000..224328cd --- /dev/null +++ b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/TransactionFee.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { getTransactionFee, makeTransaction } from 'libs/transaction'; +import { SerializedTransaction } from 'components/renderCbs'; +import { UnitDisplay } from 'components/ui'; +import { AppState } from 'reducers'; +import { connect } from 'react-redux'; +import { getNetworkConfig } from 'selectors/config'; +import BN from 'bn.js'; + +interface Props { + rates: AppState['rates']['rates']; + network: AppState['config']['network']; + isOffline: AppState['config']['offline']; +} + +class TransactionFeeClass extends React.Component { + public render() { + const { rates, network, isOffline } = this.props; + return ( + { + const transactionInstance = makeTransaction(serializedTransaction); + const fee = getTransactionFee(transactionInstance); + const usdFee = network.isTestnet ? new BN(0) : fee.muln(rates[network.unit].USD); + + return ( + + {' '} + {!isOffline && + rates[network.unit] && ( + + ($ + ) + + )} + + ); + }} + /> + ); + } +} + +function mapStateToProps(state: AppState) { + return { + rates: state.rates.rates, + network: getNetworkConfig(state), + isOffline: state.config.offline + }; +} +export const TransactionFee = connect(mapStateToProps)(TransactionFeeClass); diff --git a/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/index.ts b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/index.ts index f2b127a2..af522f79 100644 --- a/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/index.ts +++ b/common/components/ConfirmationModal/components/Details/AmountAndGasPrice/components/index.ts @@ -1 +1,2 @@ export * from './GasPrice'; +export * from './TransactionFee'; diff --git a/common/components/GasLimitField.tsx b/common/components/GasLimitField.tsx index 066b51c4..d8b4e662 100644 --- a/common/components/GasLimitField.tsx +++ b/common/components/GasLimitField.tsx @@ -8,27 +8,46 @@ import { gasLimitValidator } from 'libs/validators'; interface Props { includeLabel: boolean; onlyIncludeLoader: boolean; + customLabel?: string; + disabled?: boolean; } -export const GaslimitLoading: React.SFC<{ gasEstimationPending: boolean }> = ({ - gasEstimationPending -}) => ( +export const GaslimitLoading: React.SFC<{ + gasEstimationPending: boolean; + onlyIncludeLoader?: boolean; +}> = ({ gasEstimationPending, onlyIncludeLoader }) => ( -
- Calculating gas limit +
+ {!!onlyIncludeLoader ? 'Calculating gas limit' : 'Calculating'}
); -export const GasLimitField: React.SFC = ({ includeLabel, onlyIncludeLoader }) => ( +export const GasLimitField: React.SFC = ({ + includeLabel, + onlyIncludeLoader, + customLabel, + disabled +}) => ( - {includeLabel ? : null} - ( - <> - + +
+ {includeLabel ? ( + customLabel ? ( + + ) : ( + + ) + ) : null} +
+ +
{onlyIncludeLoader ? null : ( = ({ includeLabel, onlyIncludeLoade readOnly={!!readOnly} value={raw} onChange={onChange} + disabled={disabled} /> )} - + )} /> diff --git a/common/components/GasSlider/GasSlider.scss b/common/components/GasSlider/GasSlider.scss deleted file mode 100644 index 07cfb0b1..00000000 --- a/common/components/GasSlider/GasSlider.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'common/sass/variables'; - -.GasSlider { - &-toggle { - display: inline-block; - position: relative; - margin-top: $space-sm; - left: -8px; - } -} diff --git a/common/components/GasSlider/components/AdvancedGas.scss b/common/components/GasSlider/components/AdvancedGas.scss deleted file mode 100644 index a6ff7756..00000000 --- a/common/components/GasSlider/components/AdvancedGas.scss +++ /dev/null @@ -1,37 +0,0 @@ -.AdvancedGas { - margin-top: 0; - margin-bottom: 0; - .checkbox { - display: flex; - align-items: center; - width: fit-content; - input[type='checkbox'] { - position: initial; - margin: 0; - margin-right: 8px; - } - span { - font-size: 1rem; - font-weight: 400; - } - } - - &-gasLimit { - display: flex; - flex-wrap: wrap; - align-items: baseline; - .flex-spacer { - flex-grow: 2; - } - input { - width: 100%; - margin-top: 0; - } - } - - &-nonce { - input { - margin-top: 0; - } - } -} diff --git a/common/components/GasSlider/components/AdvancedGas.tsx b/common/components/GasSlider/components/AdvancedGas.tsx deleted file mode 100644 index 3f698715..00000000 --- a/common/components/GasSlider/components/AdvancedGas.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import classnames from 'classnames'; -import translate from 'translations'; -import FeeSummary from './FeeSummary'; -import './AdvancedGas.scss'; -import { TToggleAutoGasLimit, toggleAutoGasLimit } from 'actions/config'; -import { AppState } from 'reducers'; -import { TInputGasPrice } from 'actions/transaction'; -import { NonceField, GasLimitField, DataField } from 'components'; -import { connect } from 'react-redux'; -import { getAutoGasLimitEnabled } from 'selectors/config'; -import { isValidGasPrice } from 'selectors/transaction'; -import { sanitizeNumericalInput } from 'libs/values'; - -interface OwnProps { - inputGasPrice: TInputGasPrice; - gasPrice: AppState['transaction']['fields']['gasPrice']; -} - -interface StateProps { - autoGasLimitEnabled: AppState['config']['autoGasLimit']; - validGasPrice: boolean; -} - -interface DispatchProps { - toggleAutoGasLimit: TToggleAutoGasLimit; -} - -type Props = OwnProps & StateProps & DispatchProps; - -class AdvancedGas extends React.Component { - public render() { - const { autoGasLimitEnabled, gasPrice, validGasPrice } = this.props; - return ( -
-
- -
- -
- - -
- -
- -
- -
- -
- -
- -
- -
- -
- ( - - {gasPriceWei} * {gasLimit} = {fee} {usd && ~= ${usd} USD} - - )} - /> -
-
- ); - } - - private handleGasPriceChange = (ev: React.FormEvent) => { - const { value } = ev.currentTarget; - this.props.inputGasPrice(sanitizeNumericalInput(value)); - }; - - private handleToggleAutoGasLimit = (_: React.FormEvent) => { - this.props.toggleAutoGasLimit(); - }; -} - -export default connect( - (state: AppState) => ({ - autoGasLimitEnabled: getAutoGasLimitEnabled(state), - validGasPrice: isValidGasPrice(state) - }), - { toggleAutoGasLimit } -)(AdvancedGas); diff --git a/common/components/GasSlider/index.tsx b/common/components/GasSlider/index.tsx deleted file mode 100644 index 0ab3bc93..00000000 --- a/common/components/GasSlider/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import GasSlider from './GasSlider'; -export default GasSlider; diff --git a/common/components/Header/components/GasPriceDropdown.scss b/common/components/Header/components/GasPriceDropdown.scss deleted file mode 100644 index 02362049..00000000 --- a/common/components/Header/components/GasPriceDropdown.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "common/sass/variables"; - -.GasPrice { - - &-dropdown-menu { - padding: 0.5rem !important; - min-width: 300px !important; - - @media screen and (max-width: $screen-xs) { - left: 0; - right: auto; - } - } - - &-header { - max-width: 26rem; - color: $text-color; - p { - font-weight: 400; - margin: $space-sm 0 0; - } - - a, a:hover, a:focus, a:visited { - color: $brand-primary !important; - } - } - - &-padding-reset { - padding-left: 0 !important; - padding-right: 0 !important; - } - - &-description { - white-space: normal; - font-weight: 300 !important; - margin: 2rem 0 0; - } -} diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx index 28f65880..5ead46cd 100644 --- a/common/components/Header/index.tsx +++ b/common/components/Header/index.tsx @@ -20,7 +20,6 @@ import { CustomNodeConfig, CustomNetworkConfig } from 'config'; -import GasPriceDropdown from './components/GasPriceDropdown'; import Navigation from './components/Navigation'; import CustomNodeModal from './components/CustomNodeModal'; import OnlineStatus from './components/OnlineStatus'; @@ -134,10 +133,6 @@ export default class Header extends Component {
-
- -
-
= ({ alwaysDisplay }) => ( { const content = ( - <> +
{nonceHelp} @@ -29,7 +29,7 @@ export const NonceField: React.SFC = ({ alwaysDisplay }) => ( readOnly={readOnly} onChange={onChange} /> - +
); return alwaysDisplay || shouldDisplay ? content : null; diff --git a/common/components/SubTabs/index.tsx b/common/components/SubTabs/index.tsx index 9fac9821..0dc0765d 100644 --- a/common/components/SubTabs/index.tsx +++ b/common/components/SubTabs/index.tsx @@ -21,7 +21,7 @@ export default class SubTabs extends React.Component { return (
-
+
{tabs.map((t, i) => ( // Same as normal Link, but knows when it's active, and applies activeClassName { +class TXMetaDataPanel extends React.Component { + public static defaultProps: DefaultProps = { + initialState: 'simple' + }; + public state: State = { - showAdvanced: false + sliderState: (this.props as DefaultProps).initialState }; public componentDidMount() { if (!this.props.offline) { + this.props.reset(); this.props.fetchCCRates([this.props.network.unit]); + this.props.getNonceRequested(); } } @@ -49,21 +74,24 @@ class GasSlider extends React.Component { } public render() { - const { offline, disableAdvanced, gasPrice } = this.props; - const showAdvanced = (this.state.showAdvanced || offline) && !disableAdvanced; - + const { offline, disableToggle, gasPrice, advancedGasOptions, className = '' } = this.props; + const showAdvanced = this.state.sliderState === 'advanced' || offline; return ( -
+
{showAdvanced ? ( - + ) : ( )} {!offline && - !disableAdvanced && ( + !disableToggle && (
- + {showAdvanced ? `- ${translateRaw('Back to simple')}` @@ -77,7 +105,7 @@ class GasSlider extends React.Component { } private toggleAdvanced = () => { - this.setState({ showAdvanced: !this.state.showAdvanced }); + this.setState({ sliderState: this.state.sliderState === 'advanced' ? 'simple' : 'advanced' }); }; } @@ -91,5 +119,7 @@ function mapStateToProps(state: AppState): StateProps { export default connect(mapStateToProps, { inputGasPrice, - fetchCCRates -})(GasSlider); + fetchCCRates, + getNonceRequested, + reset +})(TXMetaDataPanel); diff --git a/common/components/TXMetaDataPanel/components/AdvancedGas.scss b/common/components/TXMetaDataPanel/components/AdvancedGas.scss new file mode 100644 index 00000000..dcc7d50d --- /dev/null +++ b/common/components/TXMetaDataPanel/components/AdvancedGas.scss @@ -0,0 +1,49 @@ +@import 'common/sass/variables'; + +.AdvancedGas { + margin-top: 0; + margin-bottom: 0; + + &-calculate-limit { + .checkbox { + display: flex; + align-items: center; + width: fit-content; + input[type='checkbox'] { + position: initial; + margin: 0; + margin-right: 8px; + } + span { + font-size: 1rem; + font-weight: 400; + } + } + } + + &-flex-wrapper { + margin: 0px -8px; + } + &-gas-price, + &-gas-limit, + &-nonce { + width: initial; + flex-grow: 1; + margin: 0px 8px; + } + @media screen and (max-width: $screen-lg) { + &-flex-wrapper { + flex-wrap: wrap; + } + + &-nonce { + width: 100%; + } + } + + &-data { + } + + &-fee-summary { + } +} diff --git a/common/components/TXMetaDataPanel/components/AdvancedGas.tsx b/common/components/TXMetaDataPanel/components/AdvancedGas.tsx new file mode 100644 index 00000000..0e58a33f --- /dev/null +++ b/common/components/TXMetaDataPanel/components/AdvancedGas.tsx @@ -0,0 +1,139 @@ +import React from 'react'; +import classnames from 'classnames'; +import translate, { translateRaw } from 'translations'; +import FeeSummary from './FeeSummary'; +import './AdvancedGas.scss'; +import { TToggleAutoGasLimit, toggleAutoGasLimit } from 'actions/config'; +import { AppState } from 'reducers'; +import { TInputGasPrice } from 'actions/transaction'; +import { NonceField, GasLimitField, DataField } from 'components'; +import { connect } from 'react-redux'; +import { getAutoGasLimitEnabled } from 'selectors/config'; +import { isValidGasPrice } from 'selectors/transaction'; +import { sanitizeNumericalInput } from 'libs/values'; + +export interface AdvancedOptions { + gasPriceField?: boolean; + gasLimitField?: boolean; + nonceField?: boolean; + dataField?: boolean; + feeSummary?: boolean; +} + +interface OwnProps { + inputGasPrice: TInputGasPrice; + gasPrice: AppState['transaction']['fields']['gasPrice']; + options?: AdvancedOptions; +} + +interface StateProps { + autoGasLimitEnabled: AppState['config']['autoGasLimit']; + validGasPrice: boolean; +} + +interface DispatchProps { + toggleAutoGasLimit: TToggleAutoGasLimit; +} + +interface State { + options: AdvancedOptions; +} + +type Props = OwnProps & StateProps & DispatchProps; + +class AdvancedGas extends React.Component { + public state = { + options: { + gasPriceField: true, + gasLimitField: true, + nonceField: true, + dataField: true, + feeSummary: true, + ...this.props.options + } + }; + + public render() { + const { autoGasLimitEnabled, gasPrice, validGasPrice } = this.props; + const { gasPriceField, gasLimitField, nonceField, dataField, feeSummary } = this.state.options; + return ( +
+
+ +
+ +
+ {gasPriceField && ( +
+ + +
+ )} + + {gasLimitField && ( +
+ +
+ )} + {nonceField && ( +
+ +
+ )} +
+ + {dataField && ( +
+ +
+ )} + + {feeSummary && ( +
+ ( + + {gasPriceWei} * {gasLimit} = {fee} {usd && ~= ${usd} USD} + + )} + /> +
+ )} +
+ ); + } + + private handleGasPriceChange = (ev: React.FormEvent) => { + const { value } = ev.currentTarget; + this.props.inputGasPrice(sanitizeNumericalInput(value)); + }; + + private handleToggleAutoGasLimit = (_: React.FormEvent) => { + this.props.toggleAutoGasLimit(); + }; +} + +export default connect( + (state: AppState) => ({ + autoGasLimitEnabled: getAutoGasLimitEnabled(state), + validGasPrice: isValidGasPrice(state) + }), + { toggleAutoGasLimit } +)(AdvancedGas); diff --git a/common/components/GasSlider/components/FeeSummary.scss b/common/components/TXMetaDataPanel/components/FeeSummary.scss similarity index 100% rename from common/components/GasSlider/components/FeeSummary.scss rename to common/components/TXMetaDataPanel/components/FeeSummary.scss diff --git a/common/components/GasSlider/components/FeeSummary.tsx b/common/components/TXMetaDataPanel/components/FeeSummary.tsx similarity index 100% rename from common/components/GasSlider/components/FeeSummary.tsx rename to common/components/TXMetaDataPanel/components/FeeSummary.tsx diff --git a/common/components/GasSlider/components/SimpleGas.scss b/common/components/TXMetaDataPanel/components/SimpleGas.scss similarity index 64% rename from common/components/GasSlider/components/SimpleGas.scss rename to common/components/TXMetaDataPanel/components/SimpleGas.scss index cff478f5..2d0dc934 100644 --- a/common/components/GasSlider/components/SimpleGas.scss +++ b/common/components/TXMetaDataPanel/components/SimpleGas.scss @@ -4,23 +4,26 @@ margin-top: 0; margin-bottom: 0; - &-flex-spacer { - flex-grow: 2; - } - &-title { + &-input-group { display: flex; - } - &-estimating { - color: rgba(51, 51, 51, 0.7); - display: flex; - align-items: baseline; - font-weight: 400; - opacity: 0; - &.active { - opacity: 1; + > .SimpleGas-slider { + flex-grow: 1; + margin-right: $input-padding-x; } - .Spinner { - margin-left: 8px; + > .FeeSummary { + margin-left: $input-padding-x; + min-width: 224px; + } + @media screen and (max-width: $screen-md) { + flex-wrap: wrap; + > .SimpleGas-slider { + width: 100%; + margin-right: 0; + } + > .FeeSummary { + width: 100%; + margin-left: 0; + } } } diff --git a/common/components/GasSlider/components/SimpleGas.tsx b/common/components/TXMetaDataPanel/components/SimpleGas.tsx similarity index 83% rename from common/components/GasSlider/components/SimpleGas.tsx rename to common/components/TXMetaDataPanel/components/SimpleGas.tsx index 580ff928..7623273e 100644 --- a/common/components/GasSlider/components/SimpleGas.tsx +++ b/common/components/TXMetaDataPanel/components/SimpleGas.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Slider from 'rc-slider'; -import translate from 'translations'; +import translate, { translateRaw } from 'translations'; import { gasPriceDefaults } from 'config'; import FeeSummary from './FeeSummary'; import { TInputGasPrice } from 'actions/transaction'; @@ -29,14 +29,16 @@ class SimpleGas extends React.Component { return (
-
- -
- +
+
{gasLimitEstimationTimedOut && ( -
+

{isWeb3Node ? "Couldn't calculate gas limit, if you know what your doing, try setting manually in Advanced settings" @@ -45,7 +47,7 @@ class SimpleGas extends React.Component {

)} -
+
{ {translate('Fast')}
-
-
( diff --git a/common/components/TXMetaDataPanel/index.tsx b/common/components/TXMetaDataPanel/index.tsx new file mode 100644 index 00000000..eed93731 --- /dev/null +++ b/common/components/TXMetaDataPanel/index.tsx @@ -0,0 +1,2 @@ +import TXMetaDataPanel from './TXMetaDataPanel'; +export default TXMetaDataPanel; diff --git a/common/components/WalletDecrypt/components/DeterministicWalletsModal.scss b/common/components/WalletDecrypt/components/DeterministicWalletsModal.scss index a7c48142..60cd205e 100644 --- a/common/components/WalletDecrypt/components/DeterministicWalletsModal.scss +++ b/common/components/WalletDecrypt/components/DeterministicWalletsModal.scss @@ -3,12 +3,12 @@ .DWModal { &-path { - display: flex; margin-bottom: 20px; &-label { font-size: $font-size-medium; margin-right: 16px; + line-height: $input-height-base; } .form-control { @@ -25,7 +25,7 @@ &-addresses { overflow-y: scroll; &-table { - width: 695px; + width: 732px; text-align: center; margin: auto; margin-bottom: 10px; diff --git a/common/components/WalletDecrypt/components/DeterministicWalletsModal.tsx b/common/components/WalletDecrypt/components/DeterministicWalletsModal.tsx index e1653349..a0b1aef3 100644 --- a/common/components/WalletDecrypt/components/DeterministicWalletsModal.tsx +++ b/common/components/WalletDecrypt/components/DeterministicWalletsModal.tsx @@ -122,8 +122,10 @@ class DeterministicWalletsModalClass extends React.Component { handleClose={onCancel} >
- {/* TODO: replace styles for flexbox with flexbox classes in https://github.com/MyEtherWallet/MyEtherWallet/pull/850/files#diff-2150778b9391533fec7b8afd060c7672 */} -
+ Addresses - )} - /> -
-
+
+ +
+
+ +
+
+
diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx index f30dbe31..b3e0e920 100644 --- a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx +++ b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx @@ -1,7 +1,6 @@ -import { GasLimitField } from './GasLimitField'; import { AmountField } from './AmountField'; import React, { Component } from 'react'; -import { NonceField, SendButton, SigningStatus } from 'components'; +import { SendButton, SigningStatus, TXMetaDataPanel } from 'components'; import WalletDecrypt, { DISABLE_WALLETS } from 'components/WalletDecrypt'; import { FullWalletOnly } from 'components/renderCbs'; @@ -12,9 +11,13 @@ export class Fields extends Component { public render() { const makeContent = () => ( - - + {this.props.button} diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/GasLimitField.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/GasLimitField.tsx deleted file mode 100644 index 0e776794..00000000 --- a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/GasLimitField.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { GasLimitFieldFactory } from 'components/GasLimitFieldFactory'; -import classnames from 'classnames'; - -export const GasLimitField: React.SFC<{}> = () => ( - -); diff --git a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx index e5c49f9e..242a0ea4 100644 --- a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx +++ b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx @@ -4,7 +4,7 @@ import { isAnyOfflineWithWeb3 } from 'selectors/derived'; import { AddressField, AmountField, - GasSlider, + TXMetaDataPanel, SendEverything, CurrentCustomMessage, GenerateTransaction, @@ -29,7 +29,7 @@ const content = (
- +
diff --git a/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx b/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx index ce83de5f..8c54567f 100644 --- a/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx +++ b/common/containers/Tabs/SendTransaction/components/RequestPayment.tsx @@ -15,7 +15,7 @@ import BN from 'bn.js'; import { NetworkConfig } from 'config'; import { validNumber, validDecimal } from 'libs/validators'; import { getGasLimit } from 'selectors/transaction'; -import { AddressField, AmountField, GasLimitField } from 'components'; +import { AddressField, AmountField, TXMetaDataPanel } from 'components'; import { SetGasLimitFieldAction } from 'actions/transaction/actionTypes/fields'; import { buildEIP681EtherRequest, buildEIP681TokenRequest } from 'libs/values'; import { getNetworkConfig, getSelectedTokenContractAddress } from 'selectors/config'; @@ -106,7 +106,16 @@ class RequestPayment extends React.Component {
- +
diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.scss b/common/containers/Tabs/Swap/components/CurrencySwap.scss index 42883eb0..f92dcd39 100644 --- a/common/containers/Tabs/Swap/components/CurrencySwap.scss +++ b/common/containers/Tabs/Swap/components/CurrencySwap.scss @@ -34,13 +34,14 @@ } &-dropdown { display: inline-block; - margin: 0.5rem 0; + margin: 0 0; } &-input { width: 100%; max-width: 10rem; margin-right: $space-sm; + margin-bottom: 0; } &-divider { @@ -54,6 +55,3 @@ margin-top: $space * 2.5; } } - - - diff --git a/common/containers/Tabs/Swap/components/CurrencySwap.tsx b/common/containers/Tabs/Swap/components/CurrencySwap.tsx index 8624d94e..dc3787d7 100644 --- a/common/containers/Tabs/Swap/components/CurrencySwap.tsx +++ b/common/containers/Tabs/Swap/components/CurrencySwap.tsx @@ -329,7 +329,7 @@ export default class CurrencySwap extends Component {

{translate('SWAP_init_1')}

{loaded || timeoutLoaded ? ( -
+
{originErr && {originErr}} {
- +
diff --git a/common/libs/transaction/utils/ether.ts b/common/libs/transaction/utils/ether.ts index a8d0b537..bb3f02f9 100644 --- a/common/libs/transaction/utils/ether.ts +++ b/common/libs/transaction/utils/ether.ts @@ -30,6 +30,11 @@ const getTransactionFields = (t: Tx): IHexStrTransaction => { }; }; +const getTransactionFee = (t: Tx) => { + const { gasPrice, gasLimit } = getTransactionFields(t); + return Wei(gasPrice).mul(Wei(gasLimit)); +}; + /** * @description Return the minimum amount of ether needed * @param t @@ -101,5 +106,6 @@ export { validateTx, makeTransaction, getTransactionFields, + getTransactionFee, computeIndexingHash }; diff --git a/common/libs/transaction/utils/index.ts b/common/libs/transaction/utils/index.ts index a92e5f36..4c6b4fd7 100644 --- a/common/libs/transaction/utils/index.ts +++ b/common/libs/transaction/utils/index.ts @@ -20,6 +20,7 @@ export { validGasLimit, makeTransaction, getTransactionFields, + getTransactionFee, computeIndexingHash } from './ether'; export * from './token'; diff --git a/common/sass/styles.scss b/common/sass/styles.scss index 8476ca9c..2a5f8773 100644 --- a/common/sass/styles.scss +++ b/common/sass/styles.scss @@ -33,4 +33,5 @@ @import './styles/overrides'; @import './styles/scaffolding'; @import './styles/tab'; +@import './styles/flexbox'; @import './fonts'; diff --git a/common/sass/styles/flexbox.scss b/common/sass/styles/flexbox.scss new file mode 100644 index 00000000..b612e6d3 --- /dev/null +++ b/common/sass/styles/flexbox.scss @@ -0,0 +1,12 @@ +.flex-wrapper { + display: flex; + &-wrap { + flex-wrap: wrap; + } + &-nowrap { + flex-wrap: nowrap; + } + .flex-spacer { + flex-grow: 2; + } +} diff --git a/common/sass/styles/overrides/forms.scss b/common/sass/styles/overrides/forms.scss index 748da317..4277d4b6 100644 --- a/common/sass/styles/overrides/forms.scss +++ b/common/sass/styles/overrides/forms.scss @@ -30,7 +30,6 @@ input[readonly] { } .form-control { - margin-top: $space-sm; margin-bottom: $space-sm; transition: $transition; padding: $input-padding;