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
GitHub
commit
76f9da63d2
@ -780,7 +780,7 @@ 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;
|
||||
@ -819,7 +819,7 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
|
||||
const serializedTx: string = await dispatch(serializeEthereumTx(txData));
|
||||
const push = await TrezorConnect.pushTransaction({
|
||||
tx: serializedTx,
|
||||
coin: network.network
|
||||
coin: network.network,
|
||||
});
|
||||
|
||||
if (!push.success) {
|
||||
|
||||
@ -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}`,
|
||||
|
||||
@ -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 {
|
||||
/>
|
||||
)}
|
||||
<StyledInput
|
||||
hasIcon={!!this.props.state}
|
||||
innerRef={this.props.innerRef}
|
||||
hasAddon={!!this.props.sideAddons}
|
||||
type={this.props.type}
|
||||
|
||||
@ -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;
|
||||
@ -39,13 +44,17 @@ 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;
|
||||
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``;
|
||||
@ -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<Props> {
|
||||
getPendingTransactions() {
|
||||
@ -62,7 +73,11 @@ class PendingTransactions extends Component<Props> {
|
||||
}
|
||||
|
||||
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<Props> {
|
||||
|
||||
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<Props> {
|
||||
<Wrapper>
|
||||
<H2>Pending transactions</H2>
|
||||
{this.getPendingTransactions().map(tx => (
|
||||
<TransactionWrapper>
|
||||
<TransactionWrapper
|
||||
key={tx.id}
|
||||
>
|
||||
<TransactionIcon
|
||||
color={() => 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<Props> {
|
||||
</TransactionIcon>
|
||||
|
||||
<TransactionName>
|
||||
<Link
|
||||
<StyledLink
|
||||
href={`${this.props.network.explorer.tx}${tx.id}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
isGray
|
||||
>
|
||||
{this.getTransactionName(tx)}
|
||||
</Link>
|
||||
</StyledLink>
|
||||
</TransactionName>
|
||||
|
||||
<TransactionAmount>
|
||||
|
||||
@ -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<Props, State> {
|
||||
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<Props, State> {
|
||||
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<Props, State> {
|
||||
let state = '';
|
||||
if (gasPriceWarnings && !gasPriceErrors) {
|
||||
state = 'warning';
|
||||
} else if (gasPriceErrors) {
|
||||
}
|
||||
if (gasPriceErrors) {
|
||||
state = 'error';
|
||||
}
|
||||
return state;
|
||||
@ -275,6 +289,7 @@ class AccountSend extends Component<Props, State> {
|
||||
total,
|
||||
errors,
|
||||
warnings,
|
||||
infos,
|
||||
data,
|
||||
sending,
|
||||
gasLimit,
|
||||
@ -340,7 +355,7 @@ class AccountSend extends Component<Props, State> {
|
||||
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<Props, State> {
|
||||
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={[
|
||||
(
|
||||
<SetMaxAmountButton
|
||||
@ -430,7 +445,9 @@ class AccountSend extends Component<Props, State> {
|
||||
/>
|
||||
</InputRow>
|
||||
|
||||
<ToggleAdvancedSettingsWrapper>
|
||||
<ToggleAdvancedSettingsWrapper
|
||||
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
|
||||
>
|
||||
<ToggleAdvancedSettingsButton
|
||||
isTransparent
|
||||
onClick={() => this.handleToggleAdvancedSettingsButton()}
|
||||
@ -448,6 +465,7 @@ class AccountSend extends Component<Props, State> {
|
||||
{this.state.isAdvancedSettingsHidden && (
|
||||
<SendButton
|
||||
isDisabled={isSendButtonDisabled}
|
||||
isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
|
||||
onClick={() => onSend()}
|
||||
>
|
||||
{sendButtonText}
|
||||
@ -486,7 +504,7 @@ class AccountSend extends Component<Props, State> {
|
||||
</Tooltip>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
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<Props, State> {
|
||||
</Tooltip>
|
||||
</InputLabelWrapper>
|
||||
)}
|
||||
bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice}
|
||||
bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
|
||||
value={gasPrice}
|
||||
onChange={event => onGasPriceChange(event.target.value)}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user