fix(send): just add fee value if amount > 0
This commit is contained in:
parent
6dcd50e90e
commit
e5ec33d540
|
@ -5,7 +5,6 @@ import styled, { withTheme, keyframes } from 'styled-components';
|
||||||
import { BigNumber } from 'bignumber.js';
|
import { BigNumber } from 'bignumber.js';
|
||||||
import { Transition, animated } from 'react-spring';
|
import { Transition, animated } from 'react-spring';
|
||||||
import { type Match } from 'react-router-dom';
|
import { type Match } from 'react-router-dom';
|
||||||
import Tooltip from 'rc-tooltip';
|
|
||||||
|
|
||||||
import { FEES } from '../constants/fees';
|
import { FEES } from '../constants/fees';
|
||||||
import { DARK } from '../constants/themes';
|
import { DARK } from '../constants/themes';
|
||||||
|
@ -32,8 +31,7 @@ import LoadingIcon from '../assets/images/sync_icon_dark.png';
|
||||||
import ArrowUpIconDark from '../assets/images/arrow_up_dark.png';
|
import ArrowUpIconDark from '../assets/images/arrow_up_dark.png';
|
||||||
import ArrowUpIconLight from '../assets/images/arrow_up_light.png';
|
import ArrowUpIconLight from '../assets/images/arrow_up_light.png';
|
||||||
|
|
||||||
import type { SendTransactionInput, MapDispatchToProps, MapStateToProps } from '../containers/send';
|
import type { MapDispatchToProps, MapStateToProps } from '../containers/send';
|
||||||
import type { State as SendState } from '../redux/modules/send';
|
|
||||||
|
|
||||||
const rotate = keyframes`
|
const rotate = keyframes`
|
||||||
from {
|
from {
|
||||||
|
@ -87,7 +85,7 @@ const AmountWrapper = styled.div`
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 0.05s ease-in-out;
|
transition: all 0.05s ease-in-out;
|
||||||
opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')};
|
opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')};
|
||||||
color: #fff;
|
color: ${props => props.theme.colors.text};
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -278,7 +276,7 @@ const HexadecimalWrapper = styled.div`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;s
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -286,10 +284,33 @@ const HexadecimalText = styled(TextComponent)`
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const SimpleTooltip = styled.div`
|
||||||
|
background: ${props => props.theme.colors.walletAddressTooltipBg};
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
right: 0px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 3px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TooltipText = styled(TextComponent)`
|
||||||
|
color: ${props => props.theme.colors.walletAddressTooltip};
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SendButtonWrapper = styled.div`
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
match: Match,
|
match: Match,
|
||||||
theme: AppTheme,
|
theme: AppTheme,
|
||||||
} & MapStateToProps & MapDispatchToProps;
|
} & MapStateToProps &
|
||||||
|
MapDispatchToProps;
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
showFee: boolean,
|
showFee: boolean,
|
||||||
|
@ -453,18 +474,12 @@ class Component extends PureComponent<Props, State> {
|
||||||
return isToAddressValid ? (
|
return isToAddressValid ? (
|
||||||
<ValidateWrapper alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={ValidIcon} />
|
<ValidateStatusIcon src={ValidIcon} />
|
||||||
<ValidateItemLabel
|
<ValidateItemLabel value='VALID' color={theme.colors.transactionReceived} />
|
||||||
value='VALID'
|
|
||||||
color={theme.colors.transactionReceived}
|
|
||||||
/>
|
|
||||||
</ValidateWrapper>
|
</ValidateWrapper>
|
||||||
) : (
|
) : (
|
||||||
<ValidateWrapper alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={InvalidIcon} />
|
<ValidateStatusIcon src={InvalidIcon} />
|
||||||
<ValidateItemLabel
|
<ValidateItemLabel value='INVALID' color={theme.colors.transactionSent} />
|
||||||
value='INVALID'
|
|
||||||
color={theme.colors.transactionSent}
|
|
||||||
/>
|
|
||||||
</ValidateWrapper>
|
</ValidateWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -564,12 +579,20 @@ class Component extends PureComponent<Props, State> {
|
||||||
addresses, balance, zecPrice, isSending, error, operationId, theme,
|
addresses, balance, zecPrice, isSending, error, operationId, theme,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {
|
const {
|
||||||
showFee, from, amount, to, memo, fee, feeType, isHexMemo, showBalanceTooltip,
|
showFee,
|
||||||
|
from,
|
||||||
|
amount,
|
||||||
|
to,
|
||||||
|
memo,
|
||||||
|
fee,
|
||||||
|
feeType,
|
||||||
|
isHexMemo,
|
||||||
|
showBalanceTooltip,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const isEmpty = amount === '';
|
const isEmpty = amount === '';
|
||||||
|
|
||||||
const fixedAmount = this.getAmountWithFee();
|
const fixedAmount = isEmpty || new BigNumber(amount).eq(0) ? 0 : this.getAmountWithFee();
|
||||||
|
|
||||||
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
||||||
const zecBalanceInUsd = formatNumber({
|
const zecBalanceInUsd = formatNumber({
|
||||||
|
@ -585,13 +608,9 @@ class Component extends PureComponent<Props, State> {
|
||||||
append: 'USD $',
|
append: 'USD $',
|
||||||
});
|
});
|
||||||
|
|
||||||
const seeMoreIcon = theme.mode === DARK
|
const seeMoreIcon = theme.mode === DARK ? MenuIconDark : MenuIconLight;
|
||||||
? MenuIconDark
|
|
||||||
: MenuIconLight;
|
|
||||||
|
|
||||||
const arrowUpIcon = theme.mode === DARK
|
const arrowUpIcon = theme.mode === DARK ? ArrowUpIconDark : ArrowUpIconLight;
|
||||||
? ArrowUpIconDark
|
|
||||||
: ArrowUpIconLight;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RowComponent id='send-wrapper' justifyContent='space-between'>
|
<RowComponent id='send-wrapper' justifyContent='space-between'>
|
||||||
|
@ -741,16 +760,13 @@ class Component extends PureComponent<Props, State> {
|
||||||
showButtons={!isSending && !error && !operationId}
|
showButtons={!isSending && !error && !operationId}
|
||||||
onClose={this.reset}
|
onClose={this.reset}
|
||||||
renderTrigger={toggle => (
|
renderTrigger={toggle => (
|
||||||
<Tooltip
|
<SendButtonWrapper>
|
||||||
placement='topRight'
|
{showBalanceTooltip ? (
|
||||||
visible={showBalanceTooltip}
|
<SimpleTooltip>
|
||||||
overlay={(
|
<TooltipText value='You do not seem' />
|
||||||
<>
|
<TooltipText value='to have enough funds' />
|
||||||
<TextComponent size={theme.fontSize.medium} value='You do not seem' />
|
</SimpleTooltip>
|
||||||
<TextComponent size={theme.fontSize.medium} value='to have enough funds' />
|
) : null}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<FormButton
|
<FormButton
|
||||||
onClick={() => this.showModal(toggle)}
|
onClick={() => this.showModal(toggle)}
|
||||||
id='send-submit-button'
|
id='send-submit-button'
|
||||||
|
@ -760,7 +776,7 @@ class Component extends PureComponent<Props, State> {
|
||||||
isFluid
|
isFluid
|
||||||
disabled={this.shouldDisableSendButton()}
|
disabled={this.shouldDisableSendButton()}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</SendButtonWrapper>
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{toggle => (
|
{toggle => (
|
||||||
|
|
Loading…
Reference in New Issue