1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00

Merge pull request #64 from satoshilabs/fix-send-form-css

fix: send form css
This commit is contained in:
Vladimir Volek 2018-09-21 13:57:11 +02:00 committed by GitHub
commit 76f9da63d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 49 deletions

View File

@ -780,7 +780,7 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
data: currentState.data, data: currentState.data,
gasLimit: currentState.gasLimit, gasLimit: currentState.gasLimit,
gasPrice: currentState.gasPrice, gasPrice: currentState.gasPrice,
nonce nonce,
})); }));
const selected: ?TrezorDevice = getState().wallet.selectedDevice; const selected: ?TrezorDevice = getState().wallet.selectedDevice;
@ -819,7 +819,7 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
const serializedTx: string = await dispatch(serializeEthereumTx(txData)); const serializedTx: string = await dispatch(serializeEthereumTx(txData));
const push = await TrezorConnect.pushTransaction({ const push = await TrezorConnect.pushTransaction({
tx: serializedTx, tx: serializedTx,
coin: network.network coin: network.network,
}); });
if (!push.success) { if (!push.success) {

View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import ReactSelect from 'react-select'; import ReactSelect from 'react-select';
import ReactAsyncSelect from 'react-select/lib/Async'; import ReactAsyncSelect from 'react-select/lib/Async';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_FAMILY } from 'config/variables';
const styles = isSearchable => ({ const styles = isSearchable => ({
singleValue: base => ({ singleValue: base => ({
@ -13,7 +12,6 @@ const styles = isSearchable => ({
}), }),
control: (base, { isDisabled }) => ({ control: (base, { isDisabled }) => ({
...base, ...base,
fontFamily: FONT_FAMILY.MONOSPACE,
minHeight: 'initial', minHeight: 'initial',
height: '100%', height: '100%',
borderRadius: '2px', borderRadius: '2px',
@ -45,7 +43,6 @@ const styles = isSearchable => ({
menuList: base => ({ menuList: base => ({
...base, ...base,
padding: 0, padding: 0,
fontFamily: FONT_FAMILY.MONOSPACE,
boxShadow: 'none', boxShadow: 'none',
background: colors.WHITE, background: colors.WHITE,
borderLeft: `1px solid ${colors.DIVIDER}`, borderLeft: `1px solid ${colors.DIVIDER}`,

View File

@ -8,7 +8,6 @@ import {
FONT_SIZE, FONT_SIZE,
FONT_WEIGHT, FONT_WEIGHT,
TRANSITION, TRANSITION,
FONT_FAMILY,
} from 'config/variables'; } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -35,10 +34,9 @@ const TopLabel = styled.span`
const StyledInput = styled.input` const StyledInput = styled.input`
width: 100%; width: 100%;
padding: 6px 12px; padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
line-height: 1.42857143; line-height: 1.42857143;
font-family: ${FONT_FAMILY.MONOSPACE};
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
font-weight: ${FONT_WEIGHT.BASE}; font-weight: ${FONT_WEIGHT.BASE};
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
@ -114,6 +112,7 @@ class Input extends Component {
/> />
)} )}
<StyledInput <StyledInput
hasIcon={!!this.props.state}
innerRef={this.props.innerRef} innerRef={this.props.innerRef}
hasAddon={!!this.props.sideAddons} hasAddon={!!this.props.sideAddons}
type={this.props.type} type={this.props.type}

View File

@ -18,12 +18,17 @@ type Props = {
} }
const Wrapper = styled.div` const Wrapper = styled.div`
padding-top: 20px;
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
`; `;
const StyledLink = styled(Link)`
text-decoration: none;
`;
const TransactionWrapper = styled.div` const TransactionWrapper = styled.div`
border-bottom: 1px solid ${colors.DIVIDER}; border-bottom: 1px solid ${colors.DIVIDER};
padding: 14px 48px; padding: 14px 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -39,13 +44,17 @@ const TransactionIcon = styled.div`
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
line-height: 30px; line-height: 25px;
text-transform: uppercase; text-transform: uppercase;
user-select: none; user-select: none;
text-align: center; text-align: center;
color: ${props => props.color}; color: ${props => props.textColor};
background: ${props => props.background}; background: ${props => props.background};
border-color: ${props => props.borderColor}; border-color: ${props => props.borderColor};
&:before {
content: ${props => props.color};
}
`; `;
const P = styled.p``; const P = styled.p``;
@ -54,7 +63,9 @@ const TransactionName = styled.div`
flex: 1; flex: 1;
`; `;
const TransactionAmount = styled.div``; const TransactionAmount = styled.div`
color: colors.TEXT_SECONDARY;
`;
class PendingTransactions extends Component<Props> { class PendingTransactions extends Component<Props> {
getPendingTransactions() { getPendingTransactions() {
@ -62,7 +73,11 @@ class PendingTransactions extends Component<Props> {
} }
getTransactionIconColors(tx: any) { getTransactionIconColors(tx: any) {
let iconColors = { }; let iconColors = {
textColor: '#fff',
background: '#000',
borderColor: '#000',
};
const bgColorFactory = new ColorHash({ lightness: 0.7 }); const bgColorFactory = new ColorHash({ lightness: 0.7 });
const textColorFactory = new ColorHash(); const textColorFactory = new ColorHash();
@ -73,26 +88,25 @@ class PendingTransactions extends Component<Props> {
if (!token) { if (!token) {
iconColors = { iconColors = {
color: '#ffffff', textColor: '#ffffff',
background: '#000000', background: '#000000',
borderColor: '#000000', borderColor: '#000000',
}; };
} else { } else {
const bgColor: string = bgColorFactory.hex(token.name); const bgColor: string = bgColorFactory.hex(token.name);
iconColors = { iconColors = {
color: textColorFactory.hex(token.name), textColor: textColorFactory.hex(token.name),
background: bgColor, background: bgColor,
borderColor: bgColor, borderColor: bgColor,
}; };
} }
} else { } else {
iconColors = { iconColors = {
color: textColorFactory.hex(tx.network), textColor: textColorFactory.hex(tx.network),
background: bgColorFactory.hex(tx.network), background: bgColorFactory.hex(tx.network),
borderColor: bgColorFactory.hex(tx.network), borderColor: bgColorFactory.hex(tx.network),
}; };
} }
return iconColors; return iconColors;
} }
@ -125,9 +139,11 @@ class PendingTransactions extends Component<Props> {
<Wrapper> <Wrapper>
<H2>Pending transactions</H2> <H2>Pending transactions</H2>
{this.getPendingTransactions().map(tx => ( {this.getPendingTransactions().map(tx => (
<TransactionWrapper> <TransactionWrapper
key={tx.id}
>
<TransactionIcon <TransactionIcon
color={() => this.getTransactionIconColors(tx).color} textColor={() => this.getTransactionIconColors(tx).textColor}
background={() => this.getTransactionIconColors(tx).background} background={() => this.getTransactionIconColors(tx).background}
borderColor={() => this.getTransactionIconColors(tx).borderColor} borderColor={() => this.getTransactionIconColors(tx).borderColor}
> >
@ -137,13 +153,14 @@ class PendingTransactions extends Component<Props> {
</TransactionIcon> </TransactionIcon>
<TransactionName> <TransactionName>
<Link <StyledLink
href={`${this.props.network.explorer.tx}${tx.id}`} href={`${this.props.network.explorer.tx}${tx.id}`}
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
isGray
> >
{this.getTransactionName(tx)} {this.getTransactionName(tx)}
</Link> </StyledLink>
</TransactionName> </TransactionName>
<TransactionAmount> <TransactionAmount>

View File

@ -21,6 +21,10 @@ import PendingTransactions from './components/PendingTransactions';
import type { Props } from './Container'; 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 = { type State = {
isAdvancedSettingsHidden: boolean, isAdvancedSettingsHidden: boolean,
shouldAnimateAdvancedSettingsToggle: boolean, shouldAnimateAdvancedSettingsToggle: boolean,
@ -76,6 +80,7 @@ const SetMaxAmountButton = styled(Button)`
`; `;
const CurrencySelect = styled(Select)` const CurrencySelect = styled(Select)`
min-width: 77px;
height: 34px; height: 34px;
flex: 0.2; flex: 0.2;
`; `;
@ -108,12 +113,21 @@ const StyledLink = styled(Link)`
`; `;
const ToggleAdvancedSettingsWrapper = styled.div` const ToggleAdvancedSettingsWrapper = styled.div`
min-height: 40px;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: ${SmallScreenWidth}) {
${props => (props.isAdvancedSettingsHidden && css`
flex-direction: column;
`)}
}
`; `;
const ToggleAdvancedSettingsButton = styled(Button)` const ToggleAdvancedSettingsButton = styled(Button)`
min-height: 40px;
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -121,7 +135,12 @@ const ToggleAdvancedSettingsButton = styled(Button)`
`; `;
const SendButton = 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` const AdvancedSettingsWrapper = styled.div`
@ -188,9 +207,11 @@ class AccountSend extends Component<Props, State> {
let state = ''; let state = '';
if (address && !addressErrors) { if (address && !addressErrors) {
state = 'success'; state = 'success';
} else if (addressWarnings && !addressErrors) { }
if (addressWarnings && !addressErrors) {
state = 'warning'; state = 'warning';
} else if (addressErrors) { }
if (addressErrors) {
state = 'error'; state = 'error';
} }
return state; return state;
@ -200,27 +221,19 @@ class AccountSend extends Component<Props, State> {
let state = ''; let state = '';
if (amountWarnings && !amountErrors) { if (amountWarnings && !amountErrors) {
state = 'warning'; state = 'warning';
} else if (amountErrors) { }
if (amountErrors) {
state = 'error'; state = 'error';
} }
return state; 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) { getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) {
let state = ''; let state = '';
if (gasLimitWarnings && !gasLimitErrors) { if (gasLimitWarnings && !gasLimitErrors) {
state = 'warning'; state = 'warning';
} else if (gasLimitErrors) { }
if (gasLimitErrors) {
state = 'error'; state = 'error';
} }
return state; return state;
@ -230,7 +243,8 @@ class AccountSend extends Component<Props, State> {
let state = ''; let state = '';
if (gasPriceWarnings && !gasPriceErrors) { if (gasPriceWarnings && !gasPriceErrors) {
state = 'warning'; state = 'warning';
} else if (gasPriceErrors) { }
if (gasPriceErrors) {
state = 'error'; state = 'error';
} }
return state; return state;
@ -275,6 +289,7 @@ class AccountSend extends Component<Props, State> {
total, total,
errors, errors,
warnings, warnings,
infos,
data, data,
sending, sending,
gasLimit, gasLimit,
@ -340,7 +355,7 @@ class AccountSend extends Component<Props, State> {
autoCapitalize="off" autoCapitalize="off"
spellCheck="false" spellCheck="false"
topLabel="Address" topLabel="Address"
bottomText={errors.address ? 'Wrong Address' : ''} bottomText={errors.address || warnings.address || infos.address}
value={address} value={address}
onChange={event => onAddressChange(event.target.value)} onChange={event => onAddressChange(event.target.value)}
/> />
@ -356,7 +371,7 @@ class AccountSend extends Component<Props, State> {
topLabel="Amount" topLabel="Amount"
value={amount} value={amount}
onChange={event => onAmountChange(event.target.value)} onChange={event => onAmountChange(event.target.value)}
bottomText={this.getAmountInputBottomText(errors.amount, warnings.amount)} bottomText={errors.amount || warnings.amount || infos.amount}
sideAddons={[ sideAddons={[
( (
<SetMaxAmountButton <SetMaxAmountButton
@ -430,7 +445,9 @@ class AccountSend extends Component<Props, State> {
/> />
</InputRow> </InputRow>
<ToggleAdvancedSettingsWrapper> <ToggleAdvancedSettingsWrapper
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
>
<ToggleAdvancedSettingsButton <ToggleAdvancedSettingsButton
isTransparent isTransparent
onClick={() => this.handleToggleAdvancedSettingsButton()} onClick={() => this.handleToggleAdvancedSettingsButton()}
@ -448,6 +465,7 @@ class AccountSend extends Component<Props, State> {
{this.state.isAdvancedSettingsHidden && ( {this.state.isAdvancedSettingsHidden && (
<SendButton <SendButton
isDisabled={isSendButtonDisabled} isDisabled={isSendButtonDisabled}
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
onClick={() => onSend()} onClick={() => onSend()}
> >
{sendButtonText} {sendButtonText}
@ -486,7 +504,7 @@ class AccountSend extends Component<Props, State> {
</Tooltip> </Tooltip>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit} bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit}
value={gasLimit} value={gasLimit}
isDisabled={networkSymbol === currency && data.length > 0} isDisabled={networkSymbol === currency && data.length > 0}
onChange={event => onGasLimitChange(event.target.value)} onChange={event => onGasLimitChange(event.target.value)}
@ -520,7 +538,7 @@ class AccountSend extends Component<Props, State> {
</Tooltip> </Tooltip>
</InputLabelWrapper> </InputLabelWrapper>
)} )}
bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice} bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
value={gasPrice} value={gasPrice}
onChange={event => onGasPriceChange(event.target.value)} onChange={event => onGasPriceChange(event.target.value)}
/> />