feature: UI imporvements

chore: electron updates

app/components/empty-transactions.js

@@ -13,8 +13,17 @@ const Wrapper = styled.div`
   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 = () => (
   <Wrapper data-testid='NoTransactions'>
-    <TextComponent value='No transactions!' />
+    <Text value='No transactions!' />
   </Wrapper>
 );

app/components/wallet-address.js

@@ -7,6 +7,7 @@ import { ColumnComponent } from './column';
 import { TextComponent } from './text';
 import { QRCode } from './qrcode';
 import { CopyToClipboard } from './copy-to-clipboard';
+import { Button } from './button';
 
 import CopyIconDark from '../assets/images/copy_icon_dark.svg';
 import CopyIconLight from '../assets/images/copy_icon_light.svg';
@@ -164,7 +165,38 @@ const AddressDetailsLabel = styled.div`
 const AddressDetailsWrapper = styled.div`
   display: flex;
   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 = {
@@ -175,6 +207,7 @@ type Props = {
 
 type State = {
   showCopiedTooltip: boolean,
+  isSecondaryCopied: boolean,
   showQRCode: boolean,
 };
 
@@ -182,6 +215,7 @@ class Component extends PureComponent<Props, State> {
   state = {
     showQRCode: false,
     showCopiedTooltip: false,
+    isSecondaryCopied: false,
   };
 
   showMoreInfo = () => this.setState(() => ({ showQRCode: true }));
@@ -192,14 +226,21 @@ class Component extends PureComponent<Props, State> {
 
   hideTooltip = () => this.setState(() => ({ showCopiedTooltip: false }));
 
+  unCopySecondary = () => this.setState(() => ({ isSecondaryCopied: false }));
+
   copyAddress = () => this.setState(
     () => ({ showCopiedTooltip: true }),
     () => setTimeout(() => this.hideTooltip(), 1500),
   );
 
+  copySecondaryAddress = () => this.setState(
+    () => ({ isSecondaryCopied: true }),
+    () => setTimeout(() => this.unCopySecondary(), 1500),
+  );
+
   render() {
     const { address, balance, theme } = this.props;
-    const { showQRCode, showCopiedTooltip } = this.state;
+    const { showQRCode, showCopiedTooltip, isSecondaryCopied } = this.state;
 
     const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;
 
@@ -244,12 +285,29 @@ class Component extends PureComponent<Props, State> {
               <QRCode value={address} />
             </QRCodeWrapper>
             <AddressDetailsWrapper>
-              <AddressDetailsLabel>Address</AddressDetailsLabel>
-              <AddressDetailsValue value={address} />
-              <AddressDetailsLabel>Funds</AddressDetailsLabel>
-              <AddressDetailsValue
-                value={formatNumber({ append: `${coinName} `, value: balance })}
-              />
+              <Column>
+                <AddressDetailsLabel>Address</AddressDetailsLabel>
+                <AddressDetailsValue value={address} />
+              </Column>
+              <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>
           </QRCodeContainer>
         )}

app/constants/explorer.js

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

app/constants/zcash-network.js

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

app/containers/dashboard.js

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

app/containers/receive.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { BigNumber } from 'bignumber.js';
 
 import { ReceiveView } from '../views/receive';
+import { SAPLING } from '../constants/zcash-network';
 
 import {
   loadAddressesSuccess,
@@ -74,7 +75,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
   },
   getNewAddress: async ({ type }) => {
     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' }));

config/daemon/wait-for-daemon-close.js

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

config/daemon/zcashd-child-process.js

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

config/electron.js

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

config/handle-deeplink.js

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

config/is-testnet.js

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