arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/actions/SendFormActions.js
View File

@ -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<FeeLevel> = 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;

3
src/components/Select/index.js
View File

@ -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}`,

5
src/components/inputs/Input/index.js
View File

@ -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}

43
src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js
View File

@ -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>

60
src/views/Wallet/views/AccountSend/index.js
View File

@ -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)}
/>