feature: UI imporvements

chore: electron updates
This commit is contained in:
Andre Neves 2019-03-30 17:10:38 -04:00
parent 53a2d94b0e
commit 1576b10711
12 changed files with 93 additions and 13 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 304 KiB

After

Width:  |  Height:  |  Size: 304 KiB

View File

@ -13,8 +13,17 @@ const Wrapper = styled.div`
padding: 30px 0; padding: 30px 0;
`; `;
const Text = styled(TextComponent)`
margin: 0 8.5px 0;
font-weight: 700;
text-transform: uppercase;
color: ${props => props.theme.colors.transactionLabelText};
font-size: 12px;
font-weight: 700;
`;
export const EmptyTransactionsComponent = () => ( export const EmptyTransactionsComponent = () => (
<Wrapper data-testid='NoTransactions'> <Wrapper data-testid='NoTransactions'>
<TextComponent value='No transactions!' /> <Text value='No transactions!' />
</Wrapper> </Wrapper>
); );

View File

@ -7,6 +7,7 @@ import { ColumnComponent } from './column';
import { TextComponent } from './text'; import { TextComponent } from './text';
import { QRCode } from './qrcode'; import { QRCode } from './qrcode';
import { CopyToClipboard } from './copy-to-clipboard'; import { CopyToClipboard } from './copy-to-clipboard';
import { Button } from './button';
import CopyIconDark from '../assets/images/copy_icon_dark.svg'; import CopyIconDark from '../assets/images/copy_icon_dark.svg';
import CopyIconLight from '../assets/images/copy_icon_light.svg'; import CopyIconLight from '../assets/images/copy_icon_light.svg';
@ -164,7 +165,38 @@ const AddressDetailsLabel = styled.div`
const AddressDetailsWrapper = styled.div` const AddressDetailsWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px 20px; padding: 10px 20px 0 20px;
`;
const FormButton = styled(Button)`
width: 100%;
margin: 5px 0;
&:first-child {
margin-top: 0;
}
`;
const Column = styled.div`
display: flex;
padding-bottom: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
`;
const SecondaryColumn = styled(Column)`
padding-bottom: 0;
`;
const Row = styled(Column)`
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
`;
const ButtonWrapper = styled.div`
max-width: 200px;
`; `;
type Props = { type Props = {
@ -175,6 +207,7 @@ type Props = {
type State = { type State = {
showCopiedTooltip: boolean, showCopiedTooltip: boolean,
isSecondaryCopied: boolean,
showQRCode: boolean, showQRCode: boolean,
}; };
@ -182,6 +215,7 @@ class Component extends PureComponent<Props, State> {
state = { state = {
showQRCode: false, showQRCode: false,
showCopiedTooltip: false, showCopiedTooltip: false,
isSecondaryCopied: false,
}; };
showMoreInfo = () => this.setState(() => ({ showQRCode: true })); showMoreInfo = () => this.setState(() => ({ showQRCode: true }));
@ -192,14 +226,21 @@ class Component extends PureComponent<Props, State> {
hideTooltip = () => this.setState(() => ({ showCopiedTooltip: false })); hideTooltip = () => this.setState(() => ({ showCopiedTooltip: false }));
unCopySecondary = () => this.setState(() => ({ isSecondaryCopied: false }));
copyAddress = () => this.setState( copyAddress = () => this.setState(
() => ({ showCopiedTooltip: true }), () => ({ showCopiedTooltip: true }),
() => setTimeout(() => this.hideTooltip(), 1500), () => setTimeout(() => this.hideTooltip(), 1500),
); );
copySecondaryAddress = () => this.setState(
() => ({ isSecondaryCopied: true }),
() => setTimeout(() => this.unCopySecondary(), 1500),
);
render() { render() {
const { address, balance, theme } = this.props; const { address, balance, theme } = this.props;
const { showQRCode, showCopiedTooltip } = this.state; const { showQRCode, showCopiedTooltip, isSecondaryCopied } = this.state;
const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight; const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;
@ -244,12 +285,29 @@ class Component extends PureComponent<Props, State> {
<QRCode value={address} /> <QRCode value={address} />
</QRCodeWrapper> </QRCodeWrapper>
<AddressDetailsWrapper> <AddressDetailsWrapper>
<AddressDetailsLabel>Address</AddressDetailsLabel> <Column>
<AddressDetailsValue value={address} /> <AddressDetailsLabel>Address</AddressDetailsLabel>
<AddressDetailsLabel>Funds</AddressDetailsLabel> <AddressDetailsValue value={address} />
<AddressDetailsValue </Column>
value={formatNumber({ append: `${coinName} `, value: balance })} <Row>
/> <SecondaryColumn>
<AddressDetailsLabel>Funds</AddressDetailsLabel>
<AddressDetailsValue
value={formatNumber({ append: `${coinName} `, value: balance })}
/>
</SecondaryColumn>
<ButtonWrapper>
<CopyToClipboard text={address} onCopy={this.copySecondaryAddress}>
<FormButton
id='send-submit-button'
label={isSecondaryCopied ? 'Copied!' : 'Copy Address'}
variant='primary'
focused
isFluid
/>
</CopyToClipboard>
</ButtonWrapper>
</Row>
</AddressDetailsWrapper> </AddressDetailsWrapper>
</QRCodeContainer> </QRCodeContainer>
)} )}

View File

@ -4,4 +4,4 @@ import isDev from 'electron-is-dev';
export const ZCASH_EXPLORER_BASE_URL = isDev export const ZCASH_EXPLORER_BASE_URL = isDev
? 'https://chain.so/tx/ZECTEST/' ? 'https://chain.so/tx/ZECTEST/'
: 'https://zcash.blockexplorer.com/tx/'; : 'https://zcha.in/transactions/';

View File

@ -1,6 +1,10 @@
// @flow // @flow
export const ZCASH_NETWORK = 'ZCASH_NETWORK'; export const ZCASH_NETWORK = 'ZCASH_NETWORK';
export const EMBEDDED_DAEMON = 'EMBEDDED_DAEMON'; export const EMBEDDED_DAEMON = 'EMBEDDED_DAEMON';
export const MAINNET = 'MAINNET'; export const MAINNET = 'MAINNET';
export const TESTNET = 'TESTNET'; export const TESTNET = 'TESTNET';
export const SPROUT = 'sprout';
export const SAPLING = 'sapling';

View File

@ -11,6 +11,7 @@ import { DashboardView } from '../views/dashboard';
import rpc from '../../services/api'; import rpc from '../../services/api';
import store from '../../config/electron-store'; import store from '../../config/electron-store';
import { SAPLING } from '../constants/zcash-network';
import { listShieldedTransactions } from '../../services/shielded-transactions'; import { listShieldedTransactions } from '../../services/shielded-transactions';
import { sortByDescend } from '../utils/sort-by-descend'; import { sortByDescend } from '../utils/sort-by-descend';
@ -70,7 +71,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
])([...transactions, ...listShieldedTransactions()]); ])([...transactions, ...listShieldedTransactions()]);
if (!zAddresses.length) { if (!zAddresses.length) {
const [, newZAddress] = await eres(rpc.z_getnewaddress()); const [, newZAddress] = await eres(rpc.z_getnewaddress(SAPLING));
if (newZAddress) zAddresses.push(newZAddress); if (newZAddress) zAddresses.push(newZAddress);
} }

View File

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { BigNumber } from 'bignumber.js'; import { BigNumber } from 'bignumber.js';
import { ReceiveView } from '../views/receive'; import { ReceiveView } from '../views/receive';
import { SAPLING } from '../constants/zcash-network';
import { import {
loadAddressesSuccess, loadAddressesSuccess,
@ -74,7 +75,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
}, },
getNewAddress: async ({ type }) => { getNewAddress: async ({ type }) => {
const [error, address] = await eres( const [error, address] = await eres(
type === 'shielded' ? rpc.z_getnewaddress() : rpc.getnewaddress(''), type === 'shielded' ? rpc.z_getnewaddress(SAPLING) : rpc.getnewaddress(''),
); );
if (error || !address) return dispatch(getNewAddressError({ error: 'Unable to generate a new address' })); if (error || !address) return dispatch(getNewAddressError({ error: 'Unable to generate a new address' }));

View File

@ -1,4 +1,5 @@
// @flow // @flow
import eres from 'eres'; import eres from 'eres';
import processExists from 'process-exists'; import processExists from 'process-exists';

View File

@ -10,6 +10,7 @@ import type { ChildProcess } from 'child_process';
import eres from 'eres'; import eres from 'eres';
import uuid from 'uuid/v4'; import uuid from 'uuid/v4';
import findProcess from 'find-process'; import findProcess from 'find-process';
/* eslint-disable-next-line import/named */ /* eslint-disable-next-line import/named */
import { mainWindow } from '../electron'; import { mainWindow } from '../electron';
import waitForDaemonClose from './wait-for-daemon-close'; import waitForDaemonClose from './wait-for-daemon-close';

View File

@ -54,6 +54,8 @@ const createWindow = () => {
}); });
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
minWidth: 700,
minHeight: 600,
width: 1000, width: 1000,
height: 660, height: 660,
transparent: false, transparent: false,
@ -61,7 +63,8 @@ const createWindow = () => {
resizable: true, resizable: true,
webPreferences: { webPreferences: {
devTools: true, devTools: true,
webSecurity: false, // devTools: false,
webSecurity: true,
}, },
}); });

View File

@ -1,4 +1,5 @@
// @flow // @flow
import { typeof app as ElectronApp, type electron$BrowserWindow, remote } from 'electron'; // eslint-disable-line import { typeof app as ElectronApp, type electron$BrowserWindow, remote } from 'electron'; // eslint-disable-line
import store from './electron-store'; import store from './electron-store';

View File

@ -1,4 +1,5 @@
// @flow // @flow
import electronStore from './electron-store'; import electronStore from './electron-store';
import { ZCASH_NETWORK, MAINNET } from '../app/constants/zcash-network'; import { ZCASH_NETWORK, MAINNET } from '../app/constants/zcash-network';