fix(address): improve address UI
- Add balance information on the side of addresses (receive, send) - Remove addresses with balance 0 from lists
This commit is contained in:
parent
cb8749d6be
commit
27dbe741f8
|
@ -2,6 +2,7 @@
|
|||
|
||||
import eres from 'eres';
|
||||
import { connect } from 'react-redux';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
|
||||
import { ReceiveView } from '../views/receive';
|
||||
|
||||
|
@ -13,16 +14,27 @@ import {
|
|||
type addressType,
|
||||
} from '../redux/modules/receive';
|
||||
|
||||
import { asyncMap } from '../utils/async-map';
|
||||
|
||||
import rpc from '../../services/api';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import type { Dispatch } from '../types/redux';
|
||||
|
||||
const mapStateToProps = ({ receive }: AppState) => ({
|
||||
export type MapStateToProps = {|
|
||||
addresses: { address: string, balance: number }[],
|
||||
|};
|
||||
|
||||
const mapStateToProps = ({ receive }: AppState): MapStateToProps => ({
|
||||
addresses: receive.addresses,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||
export type MapDispatchToProps = {|
|
||||
loadAddresses: () => Promise<*>,
|
||||
getNewAddress: ({ type: addressType }) => Promise<*>,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
loadAddresses: async () => {
|
||||
const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
|
||||
|
||||
|
@ -30,13 +42,37 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
|||
|
||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||
|
||||
const latestzAdress = zAddresses[0]
|
||||
? {
|
||||
address: zAddresses[0],
|
||||
balance: await rpc.z_getbalance(zAddresses[0]),
|
||||
}
|
||||
: null;
|
||||
const latesttAdress = transparentAddresses[0]
|
||||
? {
|
||||
address: transparentAddresses[0],
|
||||
balance: await rpc.z_getbalance(transparentAddresses[0]),
|
||||
}
|
||||
: null;
|
||||
|
||||
const allAddresses = await asyncMap(
|
||||
[...zAddresses.slice(1), ...transparentAddresses.slice(1)],
|
||||
async (address) => {
|
||||
const [err, response] = await eres(rpc.z_getbalance(address));
|
||||
|
||||
if (!err && new BigNumber(response).isGreaterThan(0)) return { address, balance: response };
|
||||
|
||||
return null;
|
||||
},
|
||||
);
|
||||
|
||||
dispatch(
|
||||
loadAddressesSuccess({
|
||||
addresses: [...zAddresses, ...transparentAddresses],
|
||||
addresses: [latesttAdress, latestzAdress, ...allAddresses].filter(Boolean),
|
||||
}),
|
||||
);
|
||||
},
|
||||
getNewAddress: async ({ type }: { type: addressType }) => {
|
||||
getNewAddress: async ({ type }) => {
|
||||
const [error, address] = await eres(
|
||||
type === 'shielded' ? rpc.z_getnewaddress() : rpc.getnewaddress(''),
|
||||
);
|
||||
|
|
|
@ -21,6 +21,7 @@ import {
|
|||
} from '../redux/modules/send';
|
||||
|
||||
import { filterObjectNullKeys } from '../utils/filter-object-null-keys';
|
||||
import { asyncMap } from '../utils/async-map';
|
||||
import { saveShieldedTransaction } from '../../services/shielded-transactions';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
|
@ -39,7 +40,7 @@ export type SendTransactionInput = {
|
|||
export type MapStateToProps = {|
|
||||
balance: number,
|
||||
zecPrice: number,
|
||||
addresses: string[],
|
||||
addresses: { address: string, balance: number }[],
|
||||
error: string | null,
|
||||
isSending: boolean,
|
||||
operationId: string | null,
|
||||
|
@ -162,9 +163,34 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
|||
|
||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||
|
||||
const latestzAdress = zAddresses[0]
|
||||
? {
|
||||
address: zAddresses[0],
|
||||
balance: await rpc.z_getbalance(zAddresses[0]),
|
||||
}
|
||||
: null;
|
||||
|
||||
const latesttAdress = transparentAddresses[0]
|
||||
? {
|
||||
address: transparentAddresses[0],
|
||||
balance: await rpc.z_getbalance(transparentAddresses[0]),
|
||||
}
|
||||
: null;
|
||||
|
||||
const allAddresses = await asyncMap(
|
||||
[...zAddresses.slice(1), ...transparentAddresses.slice(1)],
|
||||
async (address) => {
|
||||
const [err, response] = await eres(rpc.z_getbalance(address));
|
||||
|
||||
if (!err && new BigNumber(response).isGreaterThan(0)) return { address, balance: response };
|
||||
|
||||
return null;
|
||||
},
|
||||
);
|
||||
|
||||
return dispatch(
|
||||
loadAddressesSuccess({
|
||||
addresses: [...zAddresses, ...transparentAddresses],
|
||||
addresses: [latesttAdress, latestzAdress, ...allAddresses].filter(Boolean),
|
||||
}),
|
||||
);
|
||||
},
|
||||
|
|
|
@ -8,7 +8,11 @@ export const LOAD_ADDRESSES_ERROR = 'LOAD_ADDRESSES_ERROR';
|
|||
export const GET_NEW_ADDRESS_SUCCESS = 'GET_NEW_ADDRESS_SUCCESS';
|
||||
export const GET_NEW_ADDRESS_ERROR = 'GET_NEW_ADDRESS_ERROR';
|
||||
|
||||
export const loadAddressesSuccess = ({ addresses }: { addresses: string[] }) => ({
|
||||
export const loadAddressesSuccess = ({
|
||||
addresses,
|
||||
}: {
|
||||
addresses: { address: string, balance: number }[],
|
||||
}) => ({
|
||||
type: LOAD_ADDRESSES_SUCCESS,
|
||||
payload: {
|
||||
addresses,
|
||||
|
@ -37,7 +41,7 @@ export const getNewAddressError = ({ error }: { error: string }) => ({
|
|||
export type addressType = 'transparent' | 'shielded';
|
||||
|
||||
export type State = {
|
||||
addresses: string[],
|
||||
addresses: { address: string, balance: number }[],
|
||||
error: string | null,
|
||||
};
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ import PlusIconDark from '../assets/images/plus_icon_dark.svg';
|
|||
import PlusIconLight from '../assets/images/plus_icon_light.svg';
|
||||
|
||||
import type { addressType } from '../redux/modules/receive';
|
||||
import type { MapStateToProps, MapDispatchToProps } from '../containers/receive';
|
||||
|
||||
const Row = styled(RowComponent)`
|
||||
margin-bottom: 10px;
|
||||
|
@ -74,12 +75,10 @@ const RevealsMain = styled.div`
|
|||
justify-content: flex-start;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
addresses: Array<string>,
|
||||
loadAddresses: () => void,
|
||||
getNewAddress: ({ type: addressType }) => void,
|
||||
theme: AppTheme,
|
||||
};
|
||||
type Props = MapDispatchToProps &
|
||||
MapStateToProps & {
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
showAdditionalOptions: boolean,
|
||||
|
@ -111,44 +110,26 @@ class Component extends PureComponent<Props, State> {
|
|||
const { showAdditionalOptions } = this.state;
|
||||
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
||||
|
||||
const shieldedAddresses = addresses.filter(addr => addr.startsWith('z'));
|
||||
const transparentAddresses = addresses.filter(addr => addr.startsWith('t'));
|
||||
const shieldedAddresses = addresses.filter(({ address }) => address.startsWith('z'));
|
||||
const transparentAddresses = addresses.filter(({ address }) => address.startsWith('t'));
|
||||
|
||||
const seeMoreIcon = theme.mode === DARK ? MenuIconDark : MenuIconLight;
|
||||
|
||||
const seeMoreIcon = theme.mode === DARK
|
||||
? MenuIconDark
|
||||
: MenuIconLight;
|
||||
|
||||
const plusIcon = theme.mode === DARK
|
||||
? PlusIconDark
|
||||
: PlusIconLight;
|
||||
const plusIcon = theme.mode === DARK ? PlusIconDark : PlusIconLight;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Label value='Shielded Address' />
|
||||
{shieldedAddresses.map(addr => (
|
||||
<WalletAddress
|
||||
key={addr}
|
||||
address={addr}
|
||||
/>
|
||||
{shieldedAddresses.map(({ address, balance }) => (
|
||||
<WalletAddress key={address} address={address} balance={balance} />
|
||||
))}
|
||||
<Row justifyContent='space-between'>
|
||||
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
||||
<PlusIcon
|
||||
src={plusIcon}
|
||||
alt='New Shielded Address'
|
||||
/>
|
||||
<PlusIcon src={plusIcon} alt='New Shielded Address' />
|
||||
<ActionText value='New Shielded Address' />
|
||||
</ActionButton>
|
||||
<ActionButton
|
||||
onClick={this.toggleAdditionalOptions}
|
||||
isActive={showAdditionalOptions}
|
||||
>
|
||||
<ActionIcon
|
||||
isActive={showAdditionalOptions}
|
||||
src={seeMoreIcon}
|
||||
alt='More Options'
|
||||
/>
|
||||
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
||||
<ActionIcon isActive={showAdditionalOptions} src={seeMoreIcon} alt='More Options' />
|
||||
<ActionText value={buttonText} />
|
||||
</ActionButton>
|
||||
</Row>
|
||||
|
@ -175,8 +156,8 @@ class Component extends PureComponent<Props, State> {
|
|||
}}
|
||||
>
|
||||
<Label value='Transparent Address (not private)' />
|
||||
{transparentAddresses.map(addr => (
|
||||
<WalletAddress key={addr} address={addr} />
|
||||
{transparentAddresses.map(({ address, balance }) => (
|
||||
<WalletAddress key={address} address={address} balance={balance} />
|
||||
))}
|
||||
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
||||
<PlusIcon src={plusIcon} alt='New Transparent Address' />
|
||||
|
|
|
@ -21,6 +21,7 @@ import { ConfirmDialogComponent } from '../components/confirm-dialog';
|
|||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { ascii2hex } from '../utils/ascii-to-hexadecimal';
|
||||
import { isHex } from '../utils/is-hex';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import MenuIconDark from '../assets/images/menu_icon_dark.svg';
|
||||
|
@ -434,9 +435,7 @@ class Component extends PureComponent<Props, State> {
|
|||
const feeValue = fee || 0;
|
||||
|
||||
this.setState({
|
||||
showBalanceTooltip: (!from || !to)
|
||||
? false
|
||||
: new BigNumber(amount).plus(feeValue).gt(balance),
|
||||
showBalanceTooltip: !from || !to ? false : new BigNumber(amount).plus(feeValue).gt(balance),
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -584,9 +583,7 @@ class Component extends PureComponent<Props, State> {
|
|||
} = this.props;
|
||||
const { from, to } = this.state;
|
||||
|
||||
const loadingIcon = theme.mode === DARK
|
||||
? LoadingIconDark
|
||||
: LoadingIconLight;
|
||||
const loadingIcon = theme.mode === DARK ? LoadingIconDark : LoadingIconLight;
|
||||
|
||||
if (isSending) {
|
||||
return (
|
||||
|
@ -621,10 +618,7 @@ class Component extends PureComponent<Props, State> {
|
|||
return (
|
||||
<ErrorWrapper>
|
||||
<ErrorLabel value='Error' />
|
||||
<ErrorMessage
|
||||
id='send-error-message'
|
||||
value={error}
|
||||
/>
|
||||
<ErrorMessage id='send-error-message' value={error} />
|
||||
<FormButton
|
||||
label='Try Again'
|
||||
variant='primary'
|
||||
|
@ -681,7 +675,22 @@ class Component extends PureComponent<Props, State> {
|
|||
from, amount, to, fee,
|
||||
} = this.state;
|
||||
|
||||
return !from || !amount || !to || !fee || new BigNumber(amount).gt(balance);
|
||||
return (
|
||||
!from
|
||||
|| !amount
|
||||
|| !to
|
||||
|| !fee
|
||||
|| new BigNumber(amount).gt(balance)
|
||||
|| !this.isMemoContentValid()
|
||||
);
|
||||
};
|
||||
|
||||
isMemoContentValid = () => {
|
||||
const { isHexMemo, memo } = this.state;
|
||||
|
||||
if (!memo || !isHexMemo) return true;
|
||||
|
||||
return isHex(memo);
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -722,6 +731,8 @@ class Component extends PureComponent<Props, State> {
|
|||
|
||||
const arrowUpIcon = theme.mode === DARK ? ArrowUpIconDark : ArrowUpIconLight;
|
||||
|
||||
const isValidMemo = this.isMemoContentValid();
|
||||
|
||||
return (
|
||||
<RowComponent id='send-wrapper' justifyContent='space-between'>
|
||||
<FormWrapper>
|
||||
|
@ -730,7 +741,10 @@ class Component extends PureComponent<Props, State> {
|
|||
onChange={this.handleChange('from')}
|
||||
value={from}
|
||||
placeholder='Select a address'
|
||||
options={addresses.map(addr => ({ value: addr, label: addr }))}
|
||||
options={addresses.map(({ address, balance: addressBalance }) => ({
|
||||
label: `${address} (${formatNumber({ append: 'ZEC ', value: addressBalance })})`,
|
||||
value: address,
|
||||
}))}
|
||||
capitalize={false}
|
||||
/>
|
||||
<Label value='Amount' />
|
||||
|
@ -769,6 +783,7 @@ class Component extends PureComponent<Props, State> {
|
|||
placeholder='Enter a text here'
|
||||
name='memo'
|
||||
/>
|
||||
{!isValidMemo && <TextComponent value='Please enter a valid hexadecimal memo' />}
|
||||
<ActionsWrapper>
|
||||
<ShowFeeButton
|
||||
id='send-show-additional-options-button'
|
||||
|
@ -899,11 +914,7 @@ class Component extends PureComponent<Props, State> {
|
|||
</ModalContent>
|
||||
)}
|
||||
</ConfirmDialogComponent>
|
||||
<FormButton
|
||||
label='Clear Form'
|
||||
variant='secondary'
|
||||
onClick={this.reset}
|
||||
/>
|
||||
<FormButton label='Clear Form' variant='secondary' onClick={this.reset} />
|
||||
</SendWrapper>
|
||||
</RowComponent>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue