mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-30 19:00:53 +00:00
split SendForm into networks
This commit is contained in:
Szymon Lesisz
parent
4acb597401
commit
c9d30da6b2
@ -11,7 +11,7 @@ import Icon from 'components/Icon';
|
||||
import ICONS from 'config/icons';
|
||||
import { FONT_SIZE } from 'config/variables';
|
||||
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
import type { Props as BaseProps } from '../../ethereum/Container';
|
||||
|
||||
type Props = BaseProps & {
|
||||
children: React.Node,
|
||||
|
||||
@ -9,7 +9,7 @@ import ScaleText from 'react-scale-text';
|
||||
|
||||
import type { Network } from 'reducers/LocalStorageReducer';
|
||||
import type { Token } from 'reducers/TokensReducer';
|
||||
import type { Props as BaseProps } from '../../Container';
|
||||
import type { BaseProps } from '../../index';
|
||||
|
||||
type Props = {
|
||||
pending: $PropertyType<$ElementType<BaseProps, 'selectedAccount'>, 'pending'>,
|
||||
|
||||
406
src/views/Wallet/views/Account/Send/ethereum/index.js
Normal file
406
src/views/Wallet/views/Account/Send/ethereum/index.js
Normal file
@ -0,0 +1,406 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
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 P from 'components/Paragraph';
|
||||
import { H2 } from 'components/Heading';
|
||||
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`
|
||||
margin: 20px 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>
|
||||
<React.Fragment>
|
||||
<H2>Send Ethereum or tokens</H2>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</Content>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSend;
|
||||
@ -1,6 +1,6 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
<<<<<<< HEAD
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Select } from 'components/Select';
|
||||
import Button from 'components/Button';
|
||||
@ -401,3 +401,31 @@ const AccountSend = (props: Props) => {
|
||||
};
|
||||
|
||||
export default AccountSend;
|
||||
=======
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import type { State } from 'flowtype';
|
||||
import EthereumSend from './ethereum/Container';
|
||||
import RippleSend from './ripple/Container';
|
||||
|
||||
export type BaseProps = {
|
||||
selectedAccount: $ElementType<State, 'selectedAccount'>,
|
||||
}
|
||||
|
||||
// return container for requested network type
|
||||
export default connect((state: State): BaseProps => ({
|
||||
selectedAccount: state.selectedAccount,
|
||||
}), null)((props) => {
|
||||
const { network } = props.selectedAccount;
|
||||
if (!network) return null;
|
||||
|
||||
switch (network.type) {
|
||||
case 'ethereum':
|
||||
return <EthereumSend />;
|
||||
case 'ripple':
|
||||
return <RippleSend />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
>>>>>>> split SendForm into networks
|
||||
|
||||
39
src/views/Wallet/views/Account/Send/ripple/Container.js
Normal file
39
src/views/Wallet/views/Account/Send/ripple/Container.js
Normal file
@ -0,0 +1,39 @@
|
||||
/* @flow */
|
||||
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import SendFormActions from 'actions/SendFormActions';
|
||||
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
|
||||
import type { State, Dispatch } from 'flowtype';
|
||||
import AccountSend from './index';
|
||||
|
||||
type OwnProps = { }
|
||||
|
||||
export type StateProps = {
|
||||
selectedAccount: $ElementType<State, 'selectedAccount'>,
|
||||
sendForm: $ElementType<State, 'sendForm'>,
|
||||
wallet: $ElementType<State, 'wallet'>,
|
||||
fiat: $ElementType<State, 'fiat'>,
|
||||
localStorage: $ElementType<State, 'localStorage'>,
|
||||
}
|
||||
|
||||
export type DispatchProps = {
|
||||
sendFormActions: typeof SendFormActions,
|
||||
}
|
||||
|
||||
export type Props = StateProps & DispatchProps;
|
||||
|
||||
const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
|
||||
selectedAccount: state.selectedAccount,
|
||||
sendForm: state.sendForm,
|
||||
wallet: state.wallet,
|
||||
fiat: state.fiat,
|
||||
localStorage: state.localStorage,
|
||||
});
|
||||
|
||||
const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
|
||||
sendFormActions: bindActionCreators(SendFormActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AccountSend);
|
||||
406
src/views/Wallet/views/Account/Send/ripple/index.js
Normal file
406
src/views/Wallet/views/Account/Send/ripple/index.js
Normal file
@ -0,0 +1,406 @@
|
||||
/* @flow */
|
||||
|
||||
import React from 'react';
|
||||
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 P from 'components/Paragraph';
|
||||
import { H2 } from 'components/Heading';
|
||||
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`
|
||||
margin: 20px 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>
|
||||
<React.Fragment>
|
||||
<H2>Send Ethereum or tokens</H2>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</Content>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSend;
|
||||
Loading…
Reference in New Issue
Block a user