diff --git a/app/views/send.js b/app/views/send.js index 72aece5..75491c0 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -32,6 +32,25 @@ const SendWrapper = styled(ColumnComponent)` width: 25%; `; +const AmountWrapper = styled.div` + width: 100%; + &:before { + content: 'ZEC'; + font-family: ${props => props.theme.fontFamily}; + position: absolute; + margin-top: 15px; + margin-left: 15px; + display: block; + transition: all 0.05s ease-in-out; + opacity: ${props => (props.isEmpty ? '0' : '1')}; + color: #fff; + } +`; + +const AmountInput = styled(InputComponent)` + padding-left: ${props => (props.isEmpty ? '15' : '50')}px; +`; + const ShowFeeButton = styled.button` align-items: center; background: none; @@ -142,7 +161,7 @@ type State = { const initialState = { showFee: false, from: '', - amount: '0', + amount: '', to: '', feeType: FEES.LOW, fee: FEES.LOW, @@ -158,15 +177,7 @@ export class SendView extends PureComponent { } handleChange = (field: string) => (value: string) => { - if (field === 'amount') { - if (value !== '') { - this.setState(() => ({ - [field]: value, - })); - } - } else { - this.setState(() => ({ [field]: value })); - } + this.setState(() => ({ [field]: value })); }; handleChangeFeeType = (value: string) => { @@ -231,13 +242,17 @@ export class SendView extends PureComponent { feeType, } = this.state; + const isEmpty = amount === ''; + + const fixedAmount = isEmpty ? '0.00' : amount; + const zecBalance = formatNumber({ value: balance, append: 'ZEC ' }); const zecBalanceInUsd = formatNumber({ value: new BigNumber(balance).times(zecPrice).toNumber(), append: 'USD $', }); const valueSent = formatNumber({ - value: new BigNumber(amount).toNumber(), + value: new BigNumber(fixedAmount).toFormat(2), append: 'ZEC ', }); const valueSentInUsd = formatNumber({ @@ -267,13 +282,16 @@ export class SendView extends PureComponent { options={addresses.map(addr => ({ value: addr, label: addr }))} /> - + + +