fix: merge conflicts

app/app.js

@@ -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 = {};

app/components/loading-screen.js

@@ -9,8 +9,6 @@ import { TextComponent } from './text';
 
 import zcashLogo from '../assets/images/zcash-simple-icon.svg';
 
-import { appTheme } from '../theme';
-
 const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;

app/views/send.js

@@ -5,6 +5,7 @@ import styled, { withTheme, keyframes } from 'styled-components';
 import { BigNumber } from 'bignumber.js';
 import { Transition, animated } from 'react-spring';
 import { type Match } from 'react-router-dom';
+import Tooltip from 'rc-tooltip';
 
 import { FEES } from '../constants/fees';
 import { DARK } from '../constants/themes';
@@ -299,9 +300,10 @@ type State = {
   fee: number | null,
   memo: string,
   isHexMemo: boolean,
+  showBalanceTooltip: boolean,
 };
 
-const initialState = {
+const initialState: State = {
   showFee: false,
   from: '',
   amount: '',
@@ -310,6 +312,7 @@ const initialState = {
   fee: FEES.LOW,
   memo: '',
   isHexMemo: false,
+  showBalanceTooltip: false,
 };
 
 class Component extends PureComponent<Props, State> {
@@ -336,20 +339,31 @@ class Component extends PureComponent<Props, State> {
     if (toAddress && previousToAddress !== toAddress) this.handleChange('to')(toAddress);
   }
 
+  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) });
 
@@ -536,17 +550,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({
@@ -558,7 +581,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 $',
     });
 
@@ -599,7 +622,6 @@ class Component extends PureComponent<Props, State> {
               placeholder='ZEC 0.0'
               min={0.01}
               name='amount'
-              disabled={!from}
             />
           </AmountWrapper>
           <Label value='To' />
@@ -719,14 +741,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 => (

app/views/settings.js

@@ -2,6 +2,8 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 import fs from 'fs';
+import os from 'os';
+import path from 'path';
 import { promisify } from 'util';
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
@@ -26,8 +28,6 @@ import { openExternal } from '../utils/open-external';
 
 import type { MapDispatchToProps, MapStateToProps } from '../containers/settings';
 
-const HOME_DIR = electron.remote.app.getPath('home');
-
 const EXPORT_VIEW_KEYS_TITLE = 'Export View Keys';
 const EXPORT_VIEW_KEYS_CONTENT = 'Viewing keys for shielded addresses allow for the disclosure of all transaction information to a preffered party. Anyone who holds these keys can see all shielded transaction details, but cannot spend coins as it is not a private key.';
 const EXPORT_VIEW_KEYS_LEARN_MORE = 'https://z.cash/blog/viewing-keys-selective-disclosure';
@@ -164,6 +164,20 @@ export class SettingsView extends PureComponent<Props, State> {
     loadAddresses();
   }
 
+  getWalletFolderPath = () => {
+    const { app } = electron.remote;
+
+    if (os.platform() === 'darwin') {
+      return path.join(app.getPath('appData'), 'Zcash');
+    }
+
+    if (os.platform() === 'linux') {
+      return path.join(app.getPath('home'), '.zcash');
+    }
+
+    return path.join(app.getPath('appData'), 'Zcash');
+  };
+
   exportViewKeys = () => {
     const { addresses } = this.props;
 
@@ -242,15 +256,17 @@ export class SettingsView extends PureComponent<Props, State> {
       async (pathToSave: string) => {
         if (!pathToSave) return;
 
-        const zcashDir = isDev ? `${HOME_DIR}/.zcash/testnet3` : HOME_DIR;
+        const WALLET_DIR = this.getWalletFolderPath();
+
+        const zcashDir = isDev ? path.join(WALLET_DIR, 'testnet3') : WALLET_DIR;
         const walletDatPath = `${zcashDir}/wallet.dat`;
 
         const [cannotAccess] = await eres(promisify(fs.access)(walletDatPath));
 
         /* eslint-disable no-alert */
-
         if (cannotAccess) {
           alert("Couldn't backup the wallet.dat file. You need to back it up manually.");
+          return;
         }
 
         const [error] = await eres(promisify(fs.copyFile)(walletDatPath, pathToSave));

config/webpack-main.config.js

@@ -23,7 +23,7 @@ module.exports = {
         },
       },
       {
-        test: /\.scss$/,
+        test: /\.(scss|css)$/,
         use: [
           {
             loader: 'style-loader',

package.json

@@ -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",

public/flow-coverage-badge.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">88%</text><text x="107" y="14">88%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">90%</text><text x="107" y="14">90%</text></g></svg>