diff --git a/src/actions/SendFormActions.js b/src/actions/SendFormActions.js index 6b59279a..eab6a786 100644 --- a/src/actions/SendFormActions.js +++ b/src/actions/SendFormActions.js @@ -247,7 +247,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); @@ -721,7 +721,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())); @@ -771,7 +771,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, @@ -780,8 +780,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; @@ -816,14 +816,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/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}`, diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 5bd17dc5..407ff1cb 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` @@ -35,10 +34,9 @@ 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}; font-size: ${FONT_SIZE.SMALL}; font-weight: ${FONT_WEIGHT.BASE}; color: ${colors.TEXT_PRIMARY}; @@ -114,6 +112,7 @@ class Input extends Component { /> )} props.color}; + color: ${props => props.textColor}; background: ${props => props.background}; border-color: ${props => props.borderColor}; + + &:before { + content: ${props => props.color}; + } `; const P = styled.p``; @@ -54,7 +63,9 @@ const TransactionName = styled.div` flex: 1; `; -const TransactionAmount = styled.div``; +const TransactionAmount = styled.div` + color: colors.TEXT_SECONDARY; +`; class PendingTransactions extends Component { getPendingTransactions() { @@ -62,7 +73,11 @@ class PendingTransactions extends Component { } getTransactionIconColors(tx: any) { - let iconColors = { }; + let iconColors = { + textColor: '#fff', + background: '#000', + borderColor: '#000', + }; const bgColorFactory = new ColorHash({ lightness: 0.7 }); const textColorFactory = new ColorHash(); @@ -73,26 +88,25 @@ 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), }; } - return iconColors; } @@ -125,9 +139,11 @@ class PendingTransactions extends Component {

Pending transactions

{this.getPendingTransactions().map(tx => ( - + this.getTransactionIconColors(tx).color} + textColor={() => this.getTransactionIconColors(tx).textColor} background={() => this.getTransactionIconColors(tx).background} borderColor={() => this.getTransactionIconColors(tx).borderColor} > @@ -137,13 +153,14 @@ class PendingTransactions extends Component { - {this.getTransactionName(tx)} - + diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index 6e213606..024fca6a 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, @@ -76,6 +80,7 @@ const SetMaxAmountButton = styled(Button)` `; const CurrencySelect = styled(Select)` + min-width: 77px; height: 34px; flex: 0.2; `; @@ -108,12 +113,21 @@ 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}) { + ${props => (props.isAdvancedSettingsHidden && css` + flex-direction: column; + `)} + } `; const ToggleAdvancedSettingsButton = styled(Button)` + min-height: 40px; padding: 0; display: flex; align-items: center; @@ -121,7 +135,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` @@ -188,9 +207,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; @@ -200,27 +221,19 @@ class AccountSend extends Component { let state = ''; if (amountWarnings && !amountErrors) { state = 'warning'; - } else if (amountErrors) { + } + if (amountErrors) { state = 'error'; } 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) { state = 'warning'; - } else if (gasLimitErrors) { + } + if (gasLimitErrors) { state = 'error'; } return state; @@ -230,7 +243,8 @@ class AccountSend extends Component { let state = ''; if (gasPriceWarnings && !gasPriceErrors) { state = 'warning'; - } else if (gasPriceErrors) { + } + if (gasPriceErrors) { state = 'error'; } return state; @@ -275,6 +289,7 @@ class AccountSend extends Component { total, errors, warnings, + infos, data, sending, gasLimit, @@ -340,7 +355,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)} /> @@ -356,7 +371,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={[ ( { /> - + this.handleToggleAdvancedSettingsButton()} @@ -448,6 +465,7 @@ class AccountSend extends Component { {this.state.isAdvancedSettingsHidden && ( onSend()} > {sendButtonText} @@ -486,7 +504,7 @@ class AccountSend extends Component { )} - 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)} @@ -520,7 +538,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)} />