From 8333ac94f404a4d691db0fde086aedf941ff197c Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 08:00:03 +0200 Subject: [PATCH 01/16] Fix an input address icon overlaping text --- src/components/inputs/Input/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 339b73cc..a059f017 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -35,7 +35,7 @@ const TopLabel = styled.span` const StyledInput = styled.input` width: 100%; - padding: 6px 12px; + padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; line-height: 1.42857143; font-family: ${FONT_FAMILY.MONOSPACE}; @@ -114,6 +114,7 @@ class Input extends Component { /> )} Date: Thu, 20 Sep 2018 08:41:39 +0200 Subject: [PATCH 02/16] Fix currency selection overflow --- src/views/Wallet/views/AccountSend/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 6e213606..8859bfb2 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -76,6 +76,7 @@ const SetMaxAmountButton = styled(Button)` `; const CurrencySelect = styled(Select)` + min-width: 77px; height: 34px; flex: 0.2; `; From 5e85e1b0bc4888316cba29552ebd90b05936c276 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 08:42:04 +0200 Subject: [PATCH 03/16] Fix send button overflow & "Advanced settings" button overflow --- src/views/Wallet/views/AccountSend/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 8859bfb2..4e5d98d0 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -21,6 +21,10 @@ import PendingTransactions from './components/PendingTransactions'; import type { Props } from './Container'; +// TODO: Decide on a small screen width for the whole app +// and put it inside config/variables.js +const SmallScreenWidth = '850px'; + type State = { isAdvancedSettingsHidden: boolean, shouldAnimateAdvancedSettingsToggle: boolean, @@ -111,7 +115,12 @@ const StyledLink = styled(Link)` const ToggleAdvancedSettingsWrapper = styled.div` margin-bottom: 20px; display: flex; + flex-direction: row; justify-content: space-between; + + @media screen and (max-width: ${SmallScreenWidth}) { + flex-direction: column; + } `; const ToggleAdvancedSettingsButton = styled(Button)` @@ -122,7 +131,12 @@ const ToggleAdvancedSettingsButton = styled(Button)` `; const SendButton = styled(Button)` - min-width: 50%; + min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')}; + font-size: 13px; + + @media screen and (max-width: ${SmallScreenWidth}) { + margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)}; + } `; const AdvancedSettingsWrapper = styled.div` @@ -449,6 +463,7 @@ class AccountSend extends Component { {this.state.isAdvancedSettingsHidden && ( onSend()} > {sendButtonText} From 22e87b287b6a99ae5451586309051292c35aa899 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 08:43:41 +0200 Subject: [PATCH 04/16] Use default font for 'Select' --- src/components/Select/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Select/index.js b/src/components/Select/index.js index eefbac2a..33af82a4 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import ReactSelect from 'react-select'; import ReactAsyncSelect from 'react-select/lib/Async'; import colors from 'config/colors'; -import { FONT_FAMILY } from 'config/variables'; const styles = isSearchable => ({ singleValue: base => ({ @@ -13,7 +12,6 @@ const styles = isSearchable => ({ }), control: (base, { isDisabled }) => ({ ...base, - fontFamily: FONT_FAMILY.MONOSPACE, minHeight: 'initial', height: '100%', borderRadius: '2px', @@ -45,7 +43,6 @@ const styles = isSearchable => ({ menuList: base => ({ ...base, padding: 0, - fontFamily: FONT_FAMILY.MONOSPACE, boxShadow: 'none', background: colors.WHITE, borderLeft: `1px solid ${colors.DIVIDER}`, From 11a03044813b688376c5cbd488e56bd06af8a95e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 08:51:10 +0200 Subject: [PATCH 05/16] Remove default hover color for 'Icon' --- src/components/Icon/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 6e5b0d71..1879547c 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -27,7 +27,7 @@ const SvgWrapper = styled.svg` :hover { path { - fill: ${props => props.hoverColor || colors.TEXT_SECONDARY} + fill: ${props => props.hoverColor} } } `; From 6fabec6e5cddcfed2ac8ccae891b31741c02e58e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 08:51:27 +0200 Subject: [PATCH 06/16] Use default font family for the 'Input' component --- src/components/inputs/Input/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index a059f017..16ec38d3 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -8,7 +8,6 @@ import { FONT_SIZE, FONT_WEIGHT, TRANSITION, - FONT_FAMILY, } from 'config/variables'; const Wrapper = styled.div` @@ -38,7 +37,6 @@ const StyledInput = styled.input` padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px; line-height: 1.42857143; - font-family: ${FONT_FAMILY.MONOSPACE}; font-size: ${FONT_SIZE.SMALL}; font-weight: ${FONT_WEIGHT.BASE}; color: ${colors.TEXT_PRIMARY}; From d3da73ddc55d3e83eccf042096df2e72087bdb9a Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 09:12:05 +0200 Subject: [PATCH 07/16] Add key prop --- .../views/AccountSend/components/PendingTransactions/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js index 30b71781..1fedbc22 100644 --- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js @@ -125,7 +125,9 @@ class PendingTransactions extends Component {

Pending transactions

{this.getPendingTransactions().map(tx => ( - + this.getTransactionIconColors(tx).color} background={() => this.getTransactionIconColors(tx).background} From 5329460d89864b2616dd246f0efabd0ef5b162c2 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 09:12:19 +0200 Subject: [PATCH 08/16] Add default color values --- .../AccountSend/components/PendingTransactions/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js index 1fedbc22..4f92912f 100644 --- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js @@ -62,7 +62,11 @@ class PendingTransactions extends Component { } getTransactionIconColors(tx: any) { - let iconColors = { }; + let iconColors = { + color: '', + background: '', + borderColor: '', + }; const bgColorFactory = new ColorHash({ lightness: 0.7 }); const textColorFactory = new ColorHash(); @@ -92,7 +96,6 @@ class PendingTransactions extends Component { borderColor: bgColorFactory.hex(tx.network), }; } - return iconColors; } From 3202ba2f6dc80d798398a9be6d4ddcee9118f0f3 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 09:37:17 +0200 Subject: [PATCH 09/16] Fix pending transactions styling --- src/actions/SendFormActions.js | 18 +++++++++--------- .../components/PendingTransactions/index.js | 16 ++++++++++++---- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 6288c9d6..538ff8a5 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -246,7 +246,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS // const gasPrice: BigNumber = new BigNumber(EthereumjsUnits.convert(web3.gasPrice, 'wei', 'gwei')) || new BigNumber(network.defaultGasPrice); - const gasPrice: BigNumber = await dispatch( BlockchainActions.getGasPrice(network.network, network.defaultGasPrice) ); + const gasPrice: BigNumber = await dispatch(BlockchainActions.getGasPrice(network.network, network.defaultGasPrice)); // const gasPrice: BigNumber = new BigNumber(network.defaultGasPrice); const gasLimit: string = network.defaultGasLimit.toString(); const feeLevels: Array = getFeeLevels(network.symbol, gasPrice, gasLimit); @@ -733,7 +733,7 @@ const estimateGasPrice = (): AsyncAction => async (dispatch: Dispatch, getState: return; } - const gasLimit: number = await dispatch( BlockchainActions.estimateGasLimit(network.network, state.data, state.amount, state.gasPrice) ); + const gasLimit: number = await dispatch(BlockchainActions.estimateGasLimit(network.network, state.data, state.amount, state.gasPrice)); if (getState().sendForm.data === requestedData) { dispatch(onGasLimitChange(gasLimit.toString())); @@ -783,7 +783,7 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge const pendingNonce: number = stateUtils.getPendingNonce(pending); const nonce = pendingNonce > 0 && pendingNonce >= account.nonce ? pendingNonce : account.nonce; - const txData = await dispatch( prepareEthereumTx({ + const txData = await dispatch(prepareEthereumTx({ network: network.network, token: isToken ? findToken(getState().tokens, account.address, currentState.currency, account.deviceState) : null, from: account.address, @@ -792,8 +792,8 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge data: currentState.data, gasLimit: currentState.gasLimit, gasPrice: currentState.gasPrice, - nonce - }) ); + nonce, + })); const selected: ?TrezorDevice = getState().wallet.selectedDevice; if (!selected) return; @@ -828,14 +828,14 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge txData.v = signedTransaction.payload.v; try { - const serializedTx: string = await dispatch( serializeEthereumTx(txData) ); + const serializedTx: string = await dispatch(serializeEthereumTx(txData)); const push = await TrezorConnect.pushTransaction({ tx: serializedTx, - coin: network.network + coin: network.network, }); - + if (!push.success) { - throw new Error( push.payload.error ); + throw new Error(push.payload.error); } const txid = push.payload.txid; diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js index 4f92912f..262a27df 100644 --- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js @@ -18,12 +18,17 @@ type Props = { } const Wrapper = styled.div` + padding-top: 20px; border-top: 1px solid ${colors.DIVIDER}; `; +const StyledLink = styled(Link)` + text-decoration: none; +`; + const TransactionWrapper = styled.div` border-bottom: 1px solid ${colors.DIVIDER}; - padding: 14px 48px; + padding: 14px 0; display: flex; flex-direction: row; align-items: center; @@ -54,7 +59,9 @@ const TransactionName = styled.div` flex: 1; `; -const TransactionAmount = styled.div``; +const TransactionAmount = styled.div` + color: colors.TEXT_SECONDARY; +`; class PendingTransactions extends Component { getPendingTransactions() { @@ -142,13 +149,14 @@ class PendingTransactions extends Component { - {this.getTransactionName(tx)} - + From 7f133e6bb254d8c64a57f9a06fbf5d775061523f Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 09:53:29 +0200 Subject: [PATCH 10/16] Change line height in pending transaction icon --- .../views/AccountSend/components/PendingTransactions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js index 262a27df..a210a87b 100644 --- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js @@ -44,7 +44,7 @@ const TransactionIcon = styled.div` width: 36px; height: 36px; border-radius: 50%; - line-height: 30px; + line-height: 25px; text-transform: uppercase; user-select: none; text-align: center; From fab3d601c63a9dedeca79c8e5d4c033b0d7a14ba Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 09:54:04 +0200 Subject: [PATCH 11/16] Remove red background from tooltip --- src/components/Tooltip/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 656c0b19..3872a698 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -15,7 +15,6 @@ const Wrapper = styled.div` position: absolute; z-index: 1070; display: block; - background: red; visibility: visible; border: 1px solid ${colors.DIVIDER}; border-radius: 3px; From 8208245e1b98418e8b5ac53ee238dca5ed1f9d66 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 10:14:38 +0200 Subject: [PATCH 12/16] Fix prop validation error --- .../components/PendingTransactions/index.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js index a210a87b..ae560e61 100644 --- a/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js +++ b/src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js @@ -48,9 +48,13 @@ const TransactionIcon = styled.div` text-transform: uppercase; user-select: none; text-align: center; - color: ${props => props.color}; + color: ${props => props.textColor}; background: ${props => props.background}; border-color: ${props => props.borderColor}; + + &:before { + content: ${props => props.color}; + } `; const P = styled.p``; @@ -70,9 +74,9 @@ class PendingTransactions extends Component { getTransactionIconColors(tx: any) { let iconColors = { - color: '', - background: '', - borderColor: '', + textColor: '#fff', + background: '#000', + borderColor: '#000', }; const bgColorFactory = new ColorHash({ lightness: 0.7 }); const textColorFactory = new ColorHash(); @@ -84,21 +88,21 @@ class PendingTransactions extends Component { if (!token) { iconColors = { - color: '#ffffff', + textColor: '#ffffff', background: '#000000', borderColor: '#000000', }; } else { const bgColor: string = bgColorFactory.hex(token.name); iconColors = { - color: textColorFactory.hex(token.name), + textColor: textColorFactory.hex(token.name), background: bgColor, borderColor: bgColor, }; } } else { iconColors = { - color: textColorFactory.hex(tx.network), + textColor: textColorFactory.hex(tx.network), background: bgColorFactory.hex(tx.network), borderColor: bgColorFactory.hex(tx.network), }; @@ -139,7 +143,7 @@ class PendingTransactions extends Component { key={tx.id} > this.getTransactionIconColors(tx).color} + textColor={() => this.getTransactionIconColors(tx).textColor} background={() => this.getTransactionIconColors(tx).background} borderColor={() => this.getTransactionIconColors(tx).borderColor} > From e135e103c588c83f53f1785f9bc21f22d05be427 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 10:44:28 +0200 Subject: [PATCH 13/16] Better input bottomText handling --- src/views/Wallet/views/AccountSend/index.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 4e5d98d0..3a8f1a64 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -221,16 +221,6 @@ class AccountSend extends Component { return state; } - getAmountInputBottomText(amountErrors: string, amountWarnings: string) { - let text = ''; - if (amountWarnings && !amountErrors) { - text = amountWarnings; - } else if (amountErrors) { - text = amountErrors; - } - return text; - } - getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) { let state = ''; if (gasLimitWarnings && !gasLimitErrors) { @@ -290,6 +280,7 @@ class AccountSend extends Component { total, errors, warnings, + infos, data, sending, gasLimit, @@ -355,7 +346,7 @@ class AccountSend extends Component { autoCapitalize="off" spellCheck="false" topLabel="Address" - bottomText={errors.address ? 'Wrong Address' : ''} + bottomText={errors.address || warnings.address || infos.address} value={address} onChange={event => onAddressChange(event.target.value)} /> @@ -371,7 +362,7 @@ class AccountSend extends Component { topLabel="Amount" value={amount} onChange={event => onAmountChange(event.target.value)} - bottomText={this.getAmountInputBottomText(errors.amount, warnings.amount)} + bottomText={errors.amount || warnings.amount || infos.amount} sideAddons={[ ( { )} - bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit} + bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit} value={gasLimit} isDisabled={networkSymbol === currency && data.length > 0} onChange={event => onGasLimitChange(event.target.value)} @@ -536,7 +527,7 @@ class AccountSend extends Component { )} - bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice} + bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice} value={gasPrice} onChange={event => onGasPriceChange(event.target.value)} /> From 0acc7196b8fb64644cdc71c7f75c5268e44b378e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Thu, 20 Sep 2018 10:52:28 +0200 Subject: [PATCH 14/16] Fix inputs' state handling --- src/views/Wallet/views/AccountSend/index.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 3a8f1a64..50120b76 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -203,9 +203,11 @@ class AccountSend extends Component { let state = ''; if (address && !addressErrors) { state = 'success'; - } else if (addressWarnings && !addressErrors) { + } + if (addressWarnings && !addressErrors) { state = 'warning'; - } else if (addressErrors) { + } + if (addressErrors) { state = 'error'; } return state; @@ -215,7 +217,8 @@ class AccountSend extends Component { let state = ''; if (amountWarnings && !amountErrors) { state = 'warning'; - } else if (amountErrors) { + } + if (amountErrors) { state = 'error'; } return state; @@ -225,7 +228,8 @@ class AccountSend extends Component { let state = ''; if (gasLimitWarnings && !gasLimitErrors) { state = 'warning'; - } else if (gasLimitErrors) { + } + if (gasLimitErrors) { state = 'error'; } return state; @@ -235,7 +239,8 @@ class AccountSend extends Component { let state = ''; if (gasPriceWarnings && !gasPriceErrors) { state = 'warning'; - } else if (gasPriceErrors) { + } + if (gasPriceErrors) { state = 'error'; } return state; From c2fc48252db943594aae09674650cfe8e4bc8a3e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Fri, 21 Sep 2018 08:06:52 +0200 Subject: [PATCH 15/16] Fix issue when "Advanced settings" caused the form to move down --- src/views/Wallet/views/AccountSend/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 50120b76..2ce069e9 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -113,13 +113,16 @@ const StyledLink = styled(Link)` `; const ToggleAdvancedSettingsWrapper = styled.div` + min-height: 40px; margin-bottom: 20px; display: flex; flex-direction: row; justify-content: space-between; @media screen and (max-width: ${SmallScreenWidth}) { - flex-direction: column; + ${props => (props.isAdvancedSettingsHidden && css` + flex-direction: column; + `)} } `; @@ -441,7 +444,9 @@ class AccountSend extends Component { /> - + this.handleToggleAdvancedSettingsButton()} From 896f7f8055f725cdb2b436983a318282b1f8f38b Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Fri, 21 Sep 2018 13:53:50 +0200 Subject: [PATCH 16/16] Fix jumping "Advanced settings" button position --- src/views/Wallet/views/AccountSend/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 2ce069e9..024fca6a 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -127,6 +127,7 @@ const ToggleAdvancedSettingsWrapper = styled.div` `; const ToggleAdvancedSettingsButton = styled(Button)` + min-height: 40px; padding: 0; display: flex; align-items: center;