Merge pull request #75 from andrerfneves/bugfix/send-view-ux
Bugfix/send view ux
This commit is contained in:
André Neves
GitHub
commit
4996668795
|
|
@ -11,6 +11,8 @@ import { appTheme as theme, GlobalStyle } from './theme';
|
|||
import electronStore from '../config/electron-store';
|
||||
import { DARK, THEME_MODE } from './constants/themes';
|
||||
|
||||
import 'rc-tooltip/assets/bootstrap.css';
|
||||
|
||||
const store = configureStore({});
|
||||
|
||||
type Props = {};
|
||||
|
|
|
|||
|
|
@ -55,39 +55,16 @@ export const RouterComponent = ({
|
|||
<FullWrapper>
|
||||
<HeaderComponent title={getTitle(location.pathname)} />
|
||||
<ContentWrapper>
|
||||
<SidebarContainer
|
||||
location={location}
|
||||
history={history}
|
||||
/>
|
||||
{/* $FlowFixMe */}
|
||||
<SidebarContainer location={location} history={history} />
|
||||
<LayoutComponent>
|
||||
<ScrollTopComponent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={DASHBOARD_ROUTE}
|
||||
component={DashboardContainer}
|
||||
/>
|
||||
<Route
|
||||
path={SEND_ROUTE}
|
||||
component={SendContainer}
|
||||
/>
|
||||
<Route
|
||||
path={RECEIVE_ROUTE}
|
||||
component={ReceiveContainer}
|
||||
/>
|
||||
<Route
|
||||
path={SETTINGS_ROUTE}
|
||||
component={SettingsContainer}
|
||||
/>
|
||||
<Route
|
||||
path={CONSOLE_ROUTE}
|
||||
component={ConsoleView}
|
||||
/>
|
||||
<Route
|
||||
path={TRANSACTIONS_ROUTE}
|
||||
component={TransactionsContainer}
|
||||
/>
|
||||
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
||||
<Route path={SEND_ROUTE} component={SendContainer} />
|
||||
<Route path={RECEIVE_ROUTE} component={ReceiveContainer} />
|
||||
<Route path={SETTINGS_ROUTE} component={SettingsContainer} />
|
||||
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
|
||||
<Route path={TRANSACTIONS_ROUTE} component={TransactionsContainer} />
|
||||
<Route component={NotFoundView} />
|
||||
</Switch>
|
||||
</ScrollTopComponent>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import React, { Fragment, PureComponent } from 'react';
|
|||
import styled, { withTheme, keyframes } from 'styled-components';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
import { Transition, animated } from 'react-spring';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
|
||||
import { FEES } from '../constants/fees';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
|
@ -33,6 +34,13 @@ import ArrowUpIconLight from '../assets/images/arrow_up_light.png';
|
|||
import type { SendTransactionInput } from '../containers/send';
|
||||
import type { State as SendState } from '../redux/modules/send';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import MenuIcon from '../assets/images/menu_icon.svg';
|
||||
import ValidIcon from '../assets/images/green_check.png';
|
||||
import InvalidIcon from '../assets/images/error_icon.png';
|
||||
import LoadingIcon from '../assets/images/sync_icon.png';
|
||||
import ArrowUpIcon from '../assets/images/arrow_up.png';
|
||||
|
||||
const rotate = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -309,9 +317,10 @@ type State = {
|
|||
fee: number | null,
|
||||
memo: string,
|
||||
isHexMemo: boolean,
|
||||
showBalanceTooltip: boolean,
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
const initialState: State = {
|
||||
showFee: false,
|
||||
from: '',
|
||||
amount: '',
|
||||
|
|
@ -320,6 +329,7 @@ const initialState = {
|
|||
fee: FEES.LOW,
|
||||
memo: '',
|
||||
isHexMemo: false,
|
||||
showBalanceTooltip: false,
|
||||
};
|
||||
|
||||
class Component extends PureComponent<Props, State> {
|
||||
|
|
@ -333,20 +343,31 @@ class Component extends PureComponent<Props, State> {
|
|||
loadZECPrice();
|
||||
}
|
||||
|
||||
updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => {
|
||||
this.setState({ showBalanceTooltip: new BigNumber(amount).gt(balance) });
|
||||
};
|
||||
|
||||
getAmountWithFee = () => {
|
||||
const { amount, fee } = this.state;
|
||||
|
||||
const feeValue = fee || 0;
|
||||
|
||||
if (!amount) return feeValue;
|
||||
|
||||
return new BigNumber(amount).plus(feeValue).toNumber();
|
||||
};
|
||||
|
||||
handleChange = (field: string) => (value: string | number) => {
|
||||
const { validateAddress, getAddressBalance, balance } = this.props;
|
||||
const { fee, amount } = this.state;
|
||||
const { amount } = this.state;
|
||||
|
||||
if (field === 'to') {
|
||||
this.setState(() => ({ [field]: value }), () => validateAddress({ address: String(value) }));
|
||||
} else if (field === 'amount') {
|
||||
const amountWithFee = new BigNumber(value).plus(fee || 0);
|
||||
|
||||
const validAmount = amountWithFee.isGreaterThan(balance)
|
||||
? new BigNumber(balance).minus(fee || 0).toNumber()
|
||||
: value;
|
||||
|
||||
this.setState(() => ({ [field]: validAmount }));
|
||||
this.setState(
|
||||
() => ({ [field]: value }),
|
||||
() => this.updateTooltipVisibility({ balance, amount: new BigNumber(value).toNumber() }),
|
||||
);
|
||||
} else {
|
||||
if (field === 'from') getAddressBalance({ address: String(value) });
|
||||
|
||||
|
|
@ -533,17 +554,26 @@ class Component extends PureComponent<Props, State> {
|
|||
);
|
||||
};
|
||||
|
||||
shouldDisableSendButton = () => {
|
||||
const { balance } = this.props;
|
||||
const {
|
||||
from, amount, to, fee,
|
||||
} = this.state;
|
||||
|
||||
return !from || !amount || !to || !fee || new BigNumber(amount).gt(balance);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
addresses, balance, zecPrice, isSending, error, operationId, theme,
|
||||
} = this.props;
|
||||
const {
|
||||
showFee, from, amount, to, memo, fee, feeType, isHexMemo,
|
||||
showFee, from, amount, to, memo, fee, feeType, isHexMemo, showBalanceTooltip,
|
||||
} = this.state;
|
||||
|
||||
const isEmpty = amount === '';
|
||||
|
||||
const fixedAmount = isEmpty ? 0.0 : amount;
|
||||
const fixedAmount = this.getAmountWithFee();
|
||||
|
||||
const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
|
||||
const zecBalanceInUsd = formatNumber({
|
||||
|
|
@ -555,7 +585,7 @@ class Component extends PureComponent<Props, State> {
|
|||
append: 'ZEC ',
|
||||
});
|
||||
const valueSentInUsd = formatNumber({
|
||||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
value: new BigNumber(fixedAmount).times(zecPrice).toNumber(),
|
||||
append: 'USD $',
|
||||
});
|
||||
|
||||
|
|
@ -596,7 +626,6 @@ class Component extends PureComponent<Props, State> {
|
|||
placeholder='ZEC 0.0'
|
||||
min={0.01}
|
||||
name='amount'
|
||||
disabled={!from}
|
||||
/>
|
||||
</AmountWrapper>
|
||||
<Label value='To' />
|
||||
|
|
@ -716,14 +745,26 @@ class Component extends PureComponent<Props, State> {
|
|||
showButtons={!isSending && !error && !operationId}
|
||||
onClose={this.reset}
|
||||
renderTrigger={toggle => (
|
||||
<FormButton
|
||||
onClick={() => this.showModal(toggle)}
|
||||
id='send-submit-button'
|
||||
label='Send'
|
||||
focused
|
||||
isFluid
|
||||
disabled={!from || !amount || !to || !fee}
|
||||
/>
|
||||
<Tooltip
|
||||
placement='topRight'
|
||||
visible={showBalanceTooltip}
|
||||
overlay={(
|
||||
<>
|
||||
<TextComponent size={theme.fontSize.medium} value='You do not seem' />
|
||||
<TextComponent size={theme.fontSize.medium} value='to have enough funds' />
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<FormButton
|
||||
onClick={() => this.showModal(toggle)}
|
||||
id='send-submit-button'
|
||||
label='Send'
|
||||
variant='secondary'
|
||||
focused
|
||||
isFluid
|
||||
disabled={this.shouldDisableSendButton()}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
>
|
||||
{toggle => (
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.(scss|css)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
|
|
|
|||
|
|
@ -113,6 +113,7 @@
|
|||
"p-queue": "^3.0.0",
|
||||
"process-exists": "^3.1.0",
|
||||
"qrcode.react": "^0.8.0",
|
||||
"rc-tooltip": "^3.7.3",
|
||||
"react": "^16.6.0",
|
||||
"react-circle": "^1.1.1",
|
||||
"react-click-outside": "tj/react-click-outside",
|
||||
|
|
|
|||
Loading…
Reference in New Issue