mirror of
https://github.com/trezor/trezor-wallet
synced 2025-06-26 09:52:36 +00:00
Sendform: fix after rebase
This commit is contained in:
Szymon Lesisz
parent
6bf2e9da23
commit
473401ccf7
@ -10,6 +10,7 @@ import Link from 'components/Link';
|
|||||||
import ICONS from 'config/icons';
|
import ICONS from 'config/icons';
|
||||||
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
|
import Title from 'views/Wallet/components/Title';
|
||||||
import P from 'components/Paragraph';
|
import P from 'components/Paragraph';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
import Content from 'views/Wallet/components/Content';
|
import Content from 'views/Wallet/components/Content';
|
||||||
@ -34,7 +35,7 @@ const AmountInputLabel = styled.span`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const InputRow = styled.div`
|
const InputRow = styled.div`
|
||||||
margin: 20px 0;
|
padding: 0 0 15px 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SetMaxAmountButton = styled(Button)`
|
const SetMaxAmountButton = styled(Button)`
|
||||||
@ -250,155 +251,153 @@ const AccountSend = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Content>
|
<Content>
|
||||||
<React.Fragment>
|
<Title>Send Ethereum or tokens</Title>
|
||||||
<H2>Send Ethereum or tokens</H2>
|
<InputRow>
|
||||||
<InputRow>
|
<Input
|
||||||
<Input
|
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
autoComplete="off"
|
||||||
autoComplete="off"
|
autoCorrect="off"
|
||||||
autoCorrect="off"
|
autoCapitalize="off"
|
||||||
autoCapitalize="off"
|
spellCheck="false"
|
||||||
spellCheck="false"
|
topLabel="Address"
|
||||||
topLabel="Address"
|
bottomText={errors.address || warnings.address || infos.address}
|
||||||
bottomText={errors.address || warnings.address || infos.address}
|
value={address}
|
||||||
value={address}
|
onChange={event => onAddressChange(event.target.value)}
|
||||||
onChange={event => onAddressChange(event.target.value)}
|
/>
|
||||||
/>
|
</InputRow>
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
<InputRow>
|
||||||
<Input
|
<Input
|
||||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
spellCheck="false"
|
spellCheck="false"
|
||||||
topLabel={(
|
topLabel={(
|
||||||
<AmountInputLabelWrapper>
|
<AmountInputLabelWrapper>
|
||||||
<AmountInputLabel>Amount</AmountInputLabel>
|
<AmountInputLabel>Amount</AmountInputLabel>
|
||||||
{(isCurrentCurrencyToken && selectedToken) && (
|
{(isCurrentCurrencyToken && selectedToken) && (
|
||||||
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
||||||
)}
|
)}
|
||||||
</AmountInputLabelWrapper>
|
</AmountInputLabelWrapper>
|
||||||
)}
|
|
||||||
value={amount}
|
|
||||||
onChange={event => onAmountChange(event.target.value)}
|
|
||||||
bottomText={errors.amount || warnings.amount || infos.amount}
|
|
||||||
sideAddons={[
|
|
||||||
(
|
|
||||||
<SetMaxAmountButton
|
|
||||||
key="icon"
|
|
||||||
onClick={() => onSetMax()}
|
|
||||||
isActive={setMax}
|
|
||||||
>
|
|
||||||
{!setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.TOP}
|
|
||||||
size={25}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.CHECKED}
|
|
||||||
size={25}
|
|
||||||
color={colors.WHITE}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
Set max
|
|
||||||
</SetMaxAmountButton>
|
|
||||||
),
|
|
||||||
(
|
|
||||||
<CurrencySelect
|
|
||||||
key="currency"
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
value={tokensSelectValue}
|
|
||||||
isDisabled={tokensSelectData.length < 2}
|
|
||||||
onChange={onCurrencyChange}
|
|
||||||
options={tokensSelectData}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
|
||||||
<FeeLabelWrapper>
|
|
||||||
<FeeLabel>Fee</FeeLabel>
|
|
||||||
{gasPriceNeedsUpdate && (
|
|
||||||
<UpdateFeeWrapper>
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.WARNING}
|
|
||||||
color={colors.WARNING_PRIMARY}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
|
||||||
</UpdateFeeWrapper>
|
|
||||||
)}
|
|
||||||
</FeeLabelWrapper>
|
|
||||||
<Select
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
value={selectedFeeLevel}
|
|
||||||
onChange={onFeeLevelChange}
|
|
||||||
options={feeLevels}
|
|
||||||
formatOptionLabel={option => (
|
|
||||||
<FeeOptionWrapper>
|
|
||||||
<P>{option.value}</P>
|
|
||||||
<P>{option.label}</P>
|
|
||||||
</FeeOptionWrapper>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<ToggleAdvancedSettingsWrapper
|
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
|
||||||
>
|
|
||||||
<ToggleAdvancedSettingsButton
|
|
||||||
isTransparent
|
|
||||||
onClick={toggleAdvanced}
|
|
||||||
>
|
|
||||||
Advanced settings
|
|
||||||
<AdvancedSettingsIcon
|
|
||||||
icon={ICONS.ARROW_DOWN}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
size={24}
|
|
||||||
isActive={advanced}
|
|
||||||
canAnimate
|
|
||||||
/>
|
|
||||||
</ToggleAdvancedSettingsButton>
|
|
||||||
|
|
||||||
{isAdvancedSettingsHidden && (
|
|
||||||
<SendButton
|
|
||||||
isDisabled={isSendButtonDisabled}
|
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
|
||||||
onClick={() => onSend()}
|
|
||||||
>
|
|
||||||
{sendButtonText}
|
|
||||||
</SendButton>
|
|
||||||
)}
|
)}
|
||||||
</ToggleAdvancedSettingsWrapper>
|
value={amount}
|
||||||
|
onChange={event => onAmountChange(event.target.value)}
|
||||||
|
bottomText={errors.amount || warnings.amount || infos.amount}
|
||||||
|
sideAddons={[
|
||||||
|
(
|
||||||
|
<SetMaxAmountButton
|
||||||
|
key="icon"
|
||||||
|
onClick={() => onSetMax()}
|
||||||
|
isActive={setMax}
|
||||||
|
>
|
||||||
|
{!setMax && (
|
||||||
|
<Icon
|
||||||
|
icon={ICONS.TOP}
|
||||||
|
size={25}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{setMax && (
|
||||||
|
<Icon
|
||||||
|
icon={ICONS.CHECKED}
|
||||||
|
size={25}
|
||||||
|
color={colors.WHITE}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
Set max
|
||||||
|
</SetMaxAmountButton>
|
||||||
|
),
|
||||||
|
(
|
||||||
|
<CurrencySelect
|
||||||
|
key="currency"
|
||||||
|
isSearchable={false}
|
||||||
|
isClearable={false}
|
||||||
|
value={tokensSelectValue}
|
||||||
|
isDisabled={tokensSelectData.length < 2}
|
||||||
|
onChange={onCurrencyChange}
|
||||||
|
options={tokensSelectData}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</InputRow>
|
||||||
|
|
||||||
{advanced && (
|
<InputRow>
|
||||||
<AdvancedForm {...props}>
|
<FeeLabelWrapper>
|
||||||
<SendButton
|
<FeeLabel>Fee</FeeLabel>
|
||||||
isDisabled={isSendButtonDisabled}
|
{gasPriceNeedsUpdate && (
|
||||||
onClick={() => onSend()}
|
<UpdateFeeWrapper>
|
||||||
>
|
<Icon
|
||||||
{sendButtonText}
|
icon={ICONS.WARNING}
|
||||||
</SendButton>
|
color={colors.WARNING_PRIMARY}
|
||||||
</AdvancedForm>
|
size={20}
|
||||||
)}
|
/>
|
||||||
|
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
||||||
|
</UpdateFeeWrapper>
|
||||||
|
)}
|
||||||
|
</FeeLabelWrapper>
|
||||||
|
<Select
|
||||||
|
isSearchable={false}
|
||||||
|
isClearable={false}
|
||||||
|
value={selectedFeeLevel}
|
||||||
|
onChange={onFeeLevelChange}
|
||||||
|
options={feeLevels}
|
||||||
|
formatOptionLabel={option => (
|
||||||
|
<FeeOptionWrapper>
|
||||||
|
<P>{option.value}</P>
|
||||||
|
<P>{option.label}</P>
|
||||||
|
</FeeOptionWrapper>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</InputRow>
|
||||||
|
|
||||||
{props.selectedAccount.pending.length > 0 && (
|
<ToggleAdvancedSettingsWrapper
|
||||||
<PendingTransactions
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
pending={props.selectedAccount.pending}
|
>
|
||||||
tokens={props.selectedAccount.tokens}
|
<ToggleAdvancedSettingsButton
|
||||||
network={network}
|
isTransparent
|
||||||
|
onClick={toggleAdvanced}
|
||||||
|
>
|
||||||
|
Advanced settings
|
||||||
|
<AdvancedSettingsIcon
|
||||||
|
icon={ICONS.ARROW_DOWN}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
size={24}
|
||||||
|
isActive={advanced}
|
||||||
|
canAnimate
|
||||||
/>
|
/>
|
||||||
|
</ToggleAdvancedSettingsButton>
|
||||||
|
|
||||||
|
{isAdvancedSettingsHidden && (
|
||||||
|
<SendButton
|
||||||
|
isDisabled={isSendButtonDisabled}
|
||||||
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
|
onClick={() => onSend()}
|
||||||
|
>
|
||||||
|
{sendButtonText}
|
||||||
|
</SendButton>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</ToggleAdvancedSettingsWrapper>
|
||||||
|
|
||||||
|
{advanced && (
|
||||||
|
<AdvancedForm {...props}>
|
||||||
|
<SendButton
|
||||||
|
isDisabled={isSendButtonDisabled}
|
||||||
|
onClick={() => onSend()}
|
||||||
|
>
|
||||||
|
{sendButtonText}
|
||||||
|
</SendButton>
|
||||||
|
</AdvancedForm>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{props.selectedAccount.pending.length > 0 && (
|
||||||
|
<PendingTransactions
|
||||||
|
pending={props.selectedAccount.pending}
|
||||||
|
tokens={props.selectedAccount.tokens}
|
||||||
|
network={network}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Content>
|
</Content>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,407 +1,5 @@
|
|||||||
/* @flow */
|
/* @flow */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
<<<<<<< HEAD
|
|
||||||
import styled, { css } from 'styled-components';
|
|
||||||
import { Select } from 'components/Select';
|
|
||||||
import Button from 'components/Button';
|
|
||||||
import Input from 'components/inputs/Input';
|
|
||||||
import Icon from 'components/Icon';
|
|
||||||
import Link from 'components/Link';
|
|
||||||
import ICONS from 'config/icons';
|
|
||||||
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
|
||||||
import colors from 'config/colors';
|
|
||||||
import Title from 'views/Wallet/components/Title';
|
|
||||||
import P from 'components/Paragraph';
|
|
||||||
import Content from 'views/Wallet/components/Content';
|
|
||||||
import type { Token } from 'flowtype';
|
|
||||||
import AdvancedForm from './components/AdvancedForm';
|
|
||||||
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';
|
|
||||||
|
|
||||||
const AmountInputLabelWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AmountInputLabel = styled.span`
|
|
||||||
text-align: right;
|
|
||||||
color: ${colors.TEXT_SECONDARY};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const InputRow = styled.div`
|
|
||||||
padding: 0 0 15px 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SetMaxAmountButton = styled(Button)`
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
font-size: ${FONT_SIZE.SMALLER};
|
|
||||||
font-weight: ${FONT_WEIGHT.SMALLEST};
|
|
||||||
color: ${colors.TEXT_SECONDARY};
|
|
||||||
|
|
||||||
border-radius: 0;
|
|
||||||
border: 1px solid ${colors.DIVIDER};
|
|
||||||
border-right: 0;
|
|
||||||
border-left: 0;
|
|
||||||
background: transparent;
|
|
||||||
transition: ${TRANSITION.HOVER};
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: ${colors.GRAY_LIGHT};
|
|
||||||
}
|
|
||||||
|
|
||||||
${props => props.isActive && css`
|
|
||||||
color: ${colors.WHITE};
|
|
||||||
background: ${colors.GREEN_PRIMARY};
|
|
||||||
border-color: ${colors.GREEN_PRIMARY};
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: ${colors.GREEN_SECONDARY};
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background: ${colors.GREEN_TERTIARY};
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CurrencySelect = styled(Select)`
|
|
||||||
min-width: 77px;
|
|
||||||
height: 40px;
|
|
||||||
flex: 0.2;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FeeOptionWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FeeLabelWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FeeLabel = styled.span`
|
|
||||||
color: ${colors.TEXT_SECONDARY};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const UpdateFeeWrapper = styled.span`
|
|
||||||
margin-left: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: ${FONT_SIZE.SMALLER};
|
|
||||||
color: ${colors.WARNING_PRIMARY};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledLink = styled(Link)`
|
|
||||||
margin-left: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
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;
|
|
||||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SendButton = styled(Button)`
|
|
||||||
min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
@media screen and (max-width: ${SmallScreenWidth}) {
|
|
||||||
margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AdvancedSettingsIcon = styled(Icon)`
|
|
||||||
margin-left: 10px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
// render helpers
|
|
||||||
const getAddressInputState = (address: string, addressErrors: string, addressWarnings: string): string => {
|
|
||||||
let state = '';
|
|
||||||
if (address && !addressErrors) {
|
|
||||||
state = 'success';
|
|
||||||
}
|
|
||||||
if (addressWarnings && !addressErrors) {
|
|
||||||
state = 'warning';
|
|
||||||
}
|
|
||||||
if (addressErrors) {
|
|
||||||
state = 'error';
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAmountInputState = (amountErrors: string, amountWarnings: string): string => {
|
|
||||||
let state = '';
|
|
||||||
if (amountWarnings && !amountErrors) {
|
|
||||||
state = 'warning';
|
|
||||||
}
|
|
||||||
if (amountErrors) {
|
|
||||||
state = 'error';
|
|
||||||
}
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTokensSelectData = (tokens: Array<Token>, accountNetwork: any): Array<{ value: string, label: string }> => {
|
|
||||||
const tokensSelectData: Array<{ value: string, label: string }> = tokens.map(t => ({ value: t.symbol, label: t.symbol }));
|
|
||||||
tokensSelectData.unshift({ value: accountNetwork.symbol, label: accountNetwork.symbol });
|
|
||||||
|
|
||||||
return tokensSelectData;
|
|
||||||
};
|
|
||||||
|
|
||||||
// stateless component
|
|
||||||
const AccountSend = (props: Props) => {
|
|
||||||
const device = props.wallet.selectedDevice;
|
|
||||||
const {
|
|
||||||
account,
|
|
||||||
network,
|
|
||||||
discovery,
|
|
||||||
tokens,
|
|
||||||
shouldRender,
|
|
||||||
loader,
|
|
||||||
} = props.selectedAccount;
|
|
||||||
const {
|
|
||||||
address,
|
|
||||||
amount,
|
|
||||||
setMax,
|
|
||||||
networkSymbol,
|
|
||||||
currency,
|
|
||||||
feeLevels,
|
|
||||||
selectedFeeLevel,
|
|
||||||
gasPriceNeedsUpdate,
|
|
||||||
total,
|
|
||||||
errors,
|
|
||||||
warnings,
|
|
||||||
infos,
|
|
||||||
sending,
|
|
||||||
advanced,
|
|
||||||
} = props.sendForm;
|
|
||||||
|
|
||||||
const {
|
|
||||||
toggleAdvanced,
|
|
||||||
onAddressChange,
|
|
||||||
onAmountChange,
|
|
||||||
onSetMax,
|
|
||||||
onCurrencyChange,
|
|
||||||
onFeeLevelChange,
|
|
||||||
updateFeeLevels,
|
|
||||||
onSend,
|
|
||||||
} = props.sendFormActions;
|
|
||||||
const { type, title, message } = loader;
|
|
||||||
if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
|
|
||||||
|
|
||||||
const isCurrentCurrencyToken = networkSymbol !== currency;
|
|
||||||
|
|
||||||
let selectedTokenBalance = 0;
|
|
||||||
const selectedToken = tokens.find(t => t.symbol === currency);
|
|
||||||
if (selectedToken) {
|
|
||||||
selectedTokenBalance = selectedToken.balance;
|
|
||||||
}
|
|
||||||
|
|
||||||
let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
|
|
||||||
let sendButtonText: string = 'Send';
|
|
||||||
if (networkSymbol !== currency && amount.length > 0 && !errors.amount) {
|
|
||||||
sendButtonText += ` ${amount} ${currency.toUpperCase()}`;
|
|
||||||
} else if (networkSymbol === currency && total !== '0') {
|
|
||||||
sendButtonText += ` ${total} ${network.symbol}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!device.connected) {
|
|
||||||
sendButtonText = 'Device is not connected';
|
|
||||||
isSendButtonDisabled = true;
|
|
||||||
} else if (!device.available) {
|
|
||||||
sendButtonText = 'Device is unavailable';
|
|
||||||
isSendButtonDisabled = true;
|
|
||||||
} else if (!discovery.completed) {
|
|
||||||
sendButtonText = 'Loading accounts';
|
|
||||||
isSendButtonDisabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tokensSelectData = getTokensSelectData(tokens, network);
|
|
||||||
const tokensSelectValue = tokensSelectData.find(t => t.value === currency);
|
|
||||||
const isAdvancedSettingsHidden = !advanced;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Content>
|
|
||||||
<Title>Send Ethereum or tokens</Title>
|
|
||||||
<InputRow>
|
|
||||||
<Input
|
|
||||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
|
||||||
autoComplete="off"
|
|
||||||
autoCorrect="off"
|
|
||||||
autoCapitalize="off"
|
|
||||||
spellCheck="false"
|
|
||||||
topLabel="Address"
|
|
||||||
bottomText={errors.address || warnings.address || infos.address}
|
|
||||||
value={address}
|
|
||||||
onChange={event => onAddressChange(event.target.value)}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
<InputRow>
|
|
||||||
<Input
|
|
||||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
|
||||||
autoComplete="off"
|
|
||||||
autoCorrect="off"
|
|
||||||
autoCapitalize="off"
|
|
||||||
spellCheck="false"
|
|
||||||
topLabel={(
|
|
||||||
<AmountInputLabelWrapper>
|
|
||||||
<AmountInputLabel>Amount</AmountInputLabel>
|
|
||||||
{(isCurrentCurrencyToken && selectedToken) && (
|
|
||||||
<AmountInputLabel>You have: {selectedTokenBalance} {selectedToken.symbol}</AmountInputLabel>
|
|
||||||
)}
|
|
||||||
</AmountInputLabelWrapper>
|
|
||||||
)}
|
|
||||||
value={amount}
|
|
||||||
onChange={event => onAmountChange(event.target.value)}
|
|
||||||
bottomText={errors.amount || warnings.amount || infos.amount}
|
|
||||||
sideAddons={[
|
|
||||||
(
|
|
||||||
<SetMaxAmountButton
|
|
||||||
key="icon"
|
|
||||||
onClick={() => onSetMax()}
|
|
||||||
isActive={setMax}
|
|
||||||
>
|
|
||||||
{!setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.TOP}
|
|
||||||
size={25}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{setMax && (
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.CHECKED}
|
|
||||||
size={25}
|
|
||||||
color={colors.WHITE}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
Set max
|
|
||||||
</SetMaxAmountButton>
|
|
||||||
),
|
|
||||||
(
|
|
||||||
<CurrencySelect
|
|
||||||
key="currency"
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
value={tokensSelectValue}
|
|
||||||
isDisabled={tokensSelectData.length < 2}
|
|
||||||
onChange={onCurrencyChange}
|
|
||||||
options={tokensSelectData}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
|
||||||
<FeeLabelWrapper>
|
|
||||||
<FeeLabel>Fee</FeeLabel>
|
|
||||||
{gasPriceNeedsUpdate && (
|
|
||||||
<UpdateFeeWrapper>
|
|
||||||
<Icon
|
|
||||||
icon={ICONS.WARNING}
|
|
||||||
color={colors.WARNING_PRIMARY}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
Recommended fees updated. <StyledLink onClick={updateFeeLevels} isGreen>Click here to use them</StyledLink>
|
|
||||||
</UpdateFeeWrapper>
|
|
||||||
)}
|
|
||||||
</FeeLabelWrapper>
|
|
||||||
<Select
|
|
||||||
isSearchable={false}
|
|
||||||
isClearable={false}
|
|
||||||
value={selectedFeeLevel}
|
|
||||||
onChange={onFeeLevelChange}
|
|
||||||
options={feeLevels}
|
|
||||||
formatOptionLabel={option => (
|
|
||||||
<FeeOptionWrapper>
|
|
||||||
<P>{option.value}</P>
|
|
||||||
<P>{option.label}</P>
|
|
||||||
</FeeOptionWrapper>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<ToggleAdvancedSettingsWrapper
|
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
|
||||||
>
|
|
||||||
<ToggleAdvancedSettingsButton
|
|
||||||
isTransparent
|
|
||||||
onClick={toggleAdvanced}
|
|
||||||
>
|
|
||||||
Advanced settings
|
|
||||||
<AdvancedSettingsIcon
|
|
||||||
icon={ICONS.ARROW_DOWN}
|
|
||||||
color={colors.TEXT_SECONDARY}
|
|
||||||
size={24}
|
|
||||||
isActive={advanced}
|
|
||||||
canAnimate
|
|
||||||
/>
|
|
||||||
</ToggleAdvancedSettingsButton>
|
|
||||||
|
|
||||||
{isAdvancedSettingsHidden && (
|
|
||||||
<SendButton
|
|
||||||
isDisabled={isSendButtonDisabled}
|
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
|
||||||
onClick={() => onSend()}
|
|
||||||
>
|
|
||||||
{sendButtonText}
|
|
||||||
</SendButton>
|
|
||||||
)}
|
|
||||||
</ToggleAdvancedSettingsWrapper>
|
|
||||||
|
|
||||||
{advanced && (
|
|
||||||
<AdvancedForm {...props}>
|
|
||||||
<SendButton
|
|
||||||
isDisabled={isSendButtonDisabled}
|
|
||||||
onClick={() => onSend()}
|
|
||||||
>
|
|
||||||
{sendButtonText}
|
|
||||||
</SendButton>
|
|
||||||
</AdvancedForm>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{props.selectedAccount.pending.length > 0 && (
|
|
||||||
<PendingTransactions
|
|
||||||
pending={props.selectedAccount.pending}
|
|
||||||
tokens={props.selectedAccount.tokens}
|
|
||||||
network={network}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Content>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AccountSend;
|
|
||||||
=======
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import type { State } from 'flowtype';
|
import type { State } from 'flowtype';
|
||||||
@ -428,4 +26,3 @@ export default connect((state: State): BaseProps => ({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
>>>>>>> split SendForm into networks
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@ import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
|
|||||||
import type { State, Dispatch } from 'flowtype';
|
import type { State, Dispatch } from 'flowtype';
|
||||||
import AccountSend from './index';
|
import AccountSend from './index';
|
||||||
|
|
||||||
type OwnProps = { }
|
type OwnProps = {}
|
||||||
|
|
||||||
export type StateProps = {
|
export type StateProps = {
|
||||||
selectedAccount: $ElementType<State, 'selectedAccount'>,
|
selectedAccount: $ElementType<State, 'selectedAccount'>,
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import ICONS from 'config/icons';
|
|||||||
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
|
||||||
import colors from 'config/colors';
|
import colors from 'config/colors';
|
||||||
import { H2 } from 'components/Heading';
|
import { H2 } from 'components/Heading';
|
||||||
|
import Title from 'views/Wallet/components/Title';
|
||||||
import Content from 'views/Wallet/components/Content';
|
import Content from 'views/Wallet/components/Content';
|
||||||
import PendingTransactions from '../components/PendingTransactions';
|
import PendingTransactions from '../components/PendingTransactions';
|
||||||
|
|
||||||
@ -20,7 +21,7 @@ import type { Props } from './Container';
|
|||||||
const SmallScreenWidth = '850px';
|
const SmallScreenWidth = '850px';
|
||||||
|
|
||||||
const InputRow = styled.div`
|
const InputRow = styled.div`
|
||||||
margin: 20px 0;
|
padding: 0 0 15px 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SetMaxAmountButton = styled(Button)`
|
const SetMaxAmountButton = styled(Button)`
|
||||||
@ -166,91 +167,89 @@ const AccountSend = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Content>
|
<Content>
|
||||||
<React.Fragment>
|
<Title>Send Ripple</Title>
|
||||||
<H2>Send Ripple</H2>
|
<InputRow>
|
||||||
<InputRow>
|
<Input
|
||||||
<Input
|
state={getAddressInputState(address, errors.address, warnings.address)}
|
||||||
state={getAddressInputState(address, errors.address, warnings.address)}
|
autoComplete="off"
|
||||||
autoComplete="off"
|
autoCorrect="off"
|
||||||
autoCorrect="off"
|
autoCapitalize="off"
|
||||||
autoCapitalize="off"
|
spellCheck="false"
|
||||||
spellCheck="false"
|
topLabel="Address"
|
||||||
topLabel="Address"
|
bottomText={errors.address || warnings.address || infos.address}
|
||||||
bottomText={errors.address || warnings.address || infos.address}
|
value={address}
|
||||||
value={address}
|
onChange={event => onAddressChange(event.target.value)}
|
||||||
onChange={event => onAddressChange(event.target.value)}
|
/>
|
||||||
/>
|
</InputRow>
|
||||||
</InputRow>
|
|
||||||
|
|
||||||
<InputRow>
|
<InputRow>
|
||||||
<Input
|
<Input
|
||||||
state={getAmountInputState(errors.amount, warnings.amount)}
|
state={getAmountInputState(errors.amount, warnings.amount)}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
spellCheck="false"
|
spellCheck="false"
|
||||||
value={amount}
|
value={amount}
|
||||||
onChange={event => onAmountChange(event.target.value)}
|
onChange={event => onAmountChange(event.target.value)}
|
||||||
bottomText={errors.amount || warnings.amount || infos.amount}
|
bottomText={errors.amount || warnings.amount || infos.amount}
|
||||||
sideAddons={[
|
sideAddons={[
|
||||||
(
|
(
|
||||||
<SetMaxAmountButton
|
<SetMaxAmountButton
|
||||||
key="icon"
|
key="icon"
|
||||||
onClick={() => onSetMax()}
|
onClick={() => onSetMax()}
|
||||||
isActive={setMax}
|
isActive={setMax}
|
||||||
>
|
>
|
||||||
{!setMax && (
|
{!setMax && (
|
||||||
<Icon
|
<Icon
|
||||||
icon={ICONS.TOP}
|
icon={ICONS.TOP}
|
||||||
size={25}
|
size={25}
|
||||||
color={colors.TEXT_SECONDARY}
|
color={colors.TEXT_SECONDARY}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{setMax && (
|
{setMax && (
|
||||||
<Icon
|
<Icon
|
||||||
icon={ICONS.CHECKED}
|
icon={ICONS.CHECKED}
|
||||||
size={25}
|
size={25}
|
||||||
color={colors.WHITE}
|
color={colors.WHITE}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
Set max
|
Set max
|
||||||
</SetMaxAmountButton>
|
</SetMaxAmountButton>
|
||||||
),
|
),
|
||||||
(
|
(
|
||||||
<CurrencySelect
|
<CurrencySelect
|
||||||
key="currency"
|
key="currency"
|
||||||
isSearchable={false}
|
isSearchable={false}
|
||||||
isClearable={false}
|
isClearable={false}
|
||||||
value={tokensSelectValue}
|
value={tokensSelectValue}
|
||||||
isDisabled
|
isDisabled
|
||||||
options={tokensSelectData}
|
options={tokensSelectData}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</InputRow>
|
</InputRow>
|
||||||
|
|
||||||
<ToggleAdvancedSettingsWrapper
|
<ToggleAdvancedSettingsWrapper
|
||||||
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
|
>
|
||||||
|
<SendButton
|
||||||
|
isDisabled={isSendButtonDisabled}
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
||||||
|
onClick={() => onSend()}
|
||||||
>
|
>
|
||||||
<SendButton
|
{sendButtonText}
|
||||||
isDisabled={isSendButtonDisabled}
|
</SendButton>
|
||||||
isAdvancedSettingsHidden={isAdvancedSettingsHidden}
|
</ToggleAdvancedSettingsWrapper>
|
||||||
onClick={() => onSend()}
|
|
||||||
>
|
|
||||||
{sendButtonText}
|
|
||||||
</SendButton>
|
|
||||||
</ToggleAdvancedSettingsWrapper>
|
|
||||||
|
|
||||||
|
|
||||||
{props.selectedAccount.pending.length > 0 && (
|
{props.selectedAccount.pending.length > 0 && (
|
||||||
<PendingTransactions
|
<PendingTransactions
|
||||||
pending={props.selectedAccount.pending}
|
pending={props.selectedAccount.pending}
|
||||||
tokens={props.selectedAccount.tokens}
|
tokens={props.selectedAccount.tokens}
|
||||||
network={network}
|
network={network}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
|
||||||
</Content>
|
</Content>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user