Merge pull request #78 from andrerfneves/bugfix/send-view-empty-amount

Bugfix/send view empty amount
2019-02-19 11:09:32 -05:00 · 2019-02-19 11:09:32 -05:00 · aeb44d62b8
parent 7860f23d5c ac2c7c13ea
commit aeb44d62b8
13 changed files with 92 additions and 104 deletions
--- a/tests/components/transaction-item.test.js
+++ b/tests/components/transaction-item.test.js
@ -21,6 +21,7 @@ describe('<TransactionItem />', () => {
          amount={0.8652}
          date={new Date().toISOString()}
          zecPrice={2.94}
+          fees={0.0001}
        />
      </ThemeProvider>,
    );
--- a/tests/components/transactions-daily.test.js
+++ b/tests/components/transactions-daily.test.js
@ -27,6 +27,7 @@ describe('<TransactionDailyComponent />', () => {
                zecPrice: 1.345,
                date: new Date().toISOString(),
                theme: appTheme,
+                fees: 0.001,
              },
              {
                type: 'send',
@ -36,6 +37,7 @@ describe('<TransactionDailyComponent />', () => {
                zecPrice: 1.344,
                date: new Date().toISOString(),
                theme: appTheme,
+                fees: 0.001,
              },
            ]}
          />
--- a/app/app.js
+++ b/app/app.js
@ -11,8 +11,6 @@ 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 = {};
--- a/app/components/transaction-daily.js
+++ b/app/components/transaction-daily.js
@ -39,16 +39,17 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
    <Day value={transactionsDate} />
    <TransactionsWrapper>
      {transactions.map(({
-        date, type, address, amount, transactionId,
+        date, type, address, amount, transactionId, fees,
      }) => (
        <Fragment key={`${address}-${type}-${amount}-${date}`}>
          <TransactionItemComponent
            transactionId={transactionId}
            type={type}
            date={date}
-            address={address || ''}
+            address={address || 'N/A'}
            amount={amount}
            zecPrice={zecPrice}
+            fees={fees}
          />
        </Fragment>
      ))}
--- a/app/components/transaction-details.js
+++ b/app/components/transaction-details.js
@ -21,7 +21,6 @@ import { ColumnComponent } from './column';
 import { appTheme } from '../theme';

 import { formatNumber } from '../utils/format-number';
-import { truncateAddress } from '../utils/truncate-address';
 import { openExternal } from '../utils/open-external';

 const Wrapper = styled.div`
@ -127,8 +126,8 @@ type Props = {
  zecPrice: number,
  date: string,
  transactionId: string,
-  from: string,
-  to: string,
+  address: string,
+  fees: number | string,
  handleClose: () => void,
  theme: AppTheme,
 };
@ -139,35 +138,25 @@ const Component = ({
  zecPrice,
  date,
  transactionId,
-  from,
-  to,
+  address,
+  fees,
  handleClose,
  theme,
 }: Props) => {
  const isReceived = type === 'receive';
-  const receivedIcon = theme.mode === DARK
-    ? ReceivedIconDark
-    : ReceivedIconLight;
-  const sentIcon = theme.mode === DARK
-    ? SentIconDark
-    : SentIconLight;
+  const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
+  const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;

  return (
    <Wrapper>
      <CloseIconWrapper>
-        <CloseIconImg
-          src={CloseIcon}
-          onClick={handleClose}
-        />
+        <CloseIconImg src={CloseIcon} onClick={handleClose} />
      </CloseIconWrapper>
      <TitleWrapper>
        <TextComponent value='Transaction Details' align='center' />
      </TitleWrapper>
      <DetailsWrapper>
-        <Icon
-          src={isReceived ? receivedIcon : sentIcon}
-          alt='Transaction Type Icon'
-        />
+        <Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
        <TextComponent
          isBold
          size={2.625}
@ -194,10 +183,14 @@ const Component = ({
        <ColumnComponent>
          <TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
          <TextComponent
-            value={formatNumber({
-              value: new BigNumber(amount).times(0.1).toNumber(),
-              append: 'ZEC ',
-            })}
+            value={
+              fees === 'N/A'
+                ? 'N/A'
+                : formatNumber({
+                  value: new BigNumber(fees).toFormat(4),
+                  append: 'ZEC ',
+                })
+            }
          />
        </ColumnComponent>
      </InfoRow>
@ -207,7 +200,7 @@ const Component = ({
          <Label value='TRANSACTION ID' />
          <TransactionId
            onClick={
-              from !== '(Shielded)'
+              address !== '(Shielded)'
                ? () => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)
                : () => {}
            }
@ -219,15 +212,8 @@ const Component = ({
      <Divider />
      <InfoRow>
        <ColumnComponent width='100%'>
-          <Label value='FROM' />
-          <Ellipsis value={from} />
-        </ColumnComponent>
-      </InfoRow>
-      <Divider />
-      <InfoRow>
-        <ColumnComponent width='100%'>
-          <Label value='TO' />
-          <Ellipsis value={truncateAddress(to) || 'N/A'} />
+          <Label value='Address' />
+          <Ellipsis value={address} />
        </ColumnComponent>
      </InfoRow>
    </Wrapper>
--- a/app/components/transaction-item.js
+++ b/app/components/transaction-item.js
@ -71,6 +71,7 @@ export type Transaction = {
  date: string,
  address: string,
  amount: number,
+  fees: number | string,
  zecPrice: number,
  transactionId: string,
  theme: AppTheme,
@ -81,6 +82,7 @@ const Component = ({
  date,
  address,
  amount,
+  fees,
  zecPrice,
  transactionId,
  theme,
@ -97,12 +99,8 @@ const Component = ({
  });
  const transactionAddress = truncateAddress(address);

-  const receivedIcon = theme.mode === DARK
-    ? ReceivedIconDark
-    : ReceivedIconLight;
-  const sentIcon = theme.mode === DARK
-    ? SentIconDark
-    : SentIconLight;
+  const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
+  const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;

  return (
    <ModalComponent
@ -127,10 +125,7 @@ const Component = ({
            <TextComponent
              isBold
              value={transactionValueInZec}
-              color={isReceived
-                ? theme.colors.transactionReceived
-                : theme.colors.transactionSent
-              }
+              color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
            />
            <TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
          </ColumnComponent>
@ -141,8 +136,8 @@ const Component = ({
        <TransactionDetailsComponent
          amount={amount}
          date={date}
-          from={address}
-          to=''
+          address={address}
+          fees={fees}
          transactionId={transactionId}
          handleClose={toggleVisibility}
          type={type}
--- a/app/components/wallet-address.js
+++ b/app/components/wallet-address.js
@ -67,7 +67,7 @@ const QRCodeContainer = styled.div`
 `;

 const QRCodeWrapper = styled.div`
-  background-color: #FFFFFF;
+  background-color: #ffffff;
  padding: 10px;
 `;

@ -139,13 +139,9 @@ class Component extends PureComponent<Props, State> {
    const { address, theme } = this.props;
    const { showQRCode, showCopiedTooltip } = this.state;

-    const qrCodeIcon = theme.mode === DARK
-      ? ScanIconDark
-      : ScanIconLight;
+    const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;

-    const copyIcon = theme.mode === DARK
-      ? CopyIconDark
-      : CopyIconLight;
+    const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;

    return (
      <ColumnComponent width='100%'>
@ -155,27 +151,18 @@ class Component extends PureComponent<Props, State> {
            onClick={this.toggleMoreInfo}
            onDoubleClick={this.showMoreInfo}
          />
-          <CopyToClipboard
-            text={address}
-            onCopy={this.copyAddress}
-          >
+          <CopyToClipboard text={address} onCopy={this.copyAddress}>
            <IconButton onClick={() => {}}>
              {!showCopiedTooltip ? null : (
                <CopyTooltip>
                  <TooltipText value='Copied!' />
                </CopyTooltip>
              )}
-              <IconImage
-                src={copyIcon}
-                alt='Copy Address'
-              />
+              <IconImage src={copyIcon} alt='Copy Address' />
            </IconButton>
          </CopyToClipboard>
          <IconButton onClick={this.toggleMoreInfo}>
-            <IconImage
-              src={qrCodeIcon}
-              alt='See QRCode'
-            />
+            <IconImage src={qrCodeIcon} alt='See QRCode' />
          </IconButton>
        </AddressWrapper>
        {!showQRCode ? null : (
--- a/app/containers/dashboard.js
+++ b/app/containers/dashboard.js
@ -50,11 +50,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({

    const formattedTransactions: Array<Object> = flow([
      arr => arr.map(transaction => ({
-        transactionId: transaction.txid,
+        transactionId: transaction.txid || 'N/A',
        type: transaction.category,
        date: new Date(transaction.time * 1000).toISOString(),
        address: transaction.address,
        amount: Math.abs(transaction.amount),
+        fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
      })),
      arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
      obj => Object.keys(obj).map(day => ({
--- a/app/containers/transactions.js
+++ b/app/containers/transactions.js
@ -70,6 +70,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
        date: new Date(transaction.time * 1000).toISOString(),
        address: transaction.address,
        amount: new BigNumber(transaction.amount).absoluteValue().toNumber(),
+        fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
      })),
    );

--- a/app/views/send.js
+++ b/app/views/send.js
@ -5,7 +5,6 @@ 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';
@ -32,8 +31,7 @@ import LoadingIcon from '../assets/images/sync_icon_dark.png';
 import ArrowUpIconDark from '../assets/images/arrow_up_dark.png';
 import ArrowUpIconLight from '../assets/images/arrow_up_light.png';

-import type { SendTransactionInput, MapDispatchToProps, MapStateToProps } from '../containers/send';
-import type { State as SendState } from '../redux/modules/send';
+import type { MapDispatchToProps, MapStateToProps } from '../containers/send';

 const rotate = keyframes`
  from {
@ -87,7 +85,7 @@ const AmountWrapper = styled.div`
    display: block;
    transition: all 0.05s ease-in-out;
    opacity: ${(props: AmountProps) => (props.isEmpty ? '0' : '1')};
-    color: #fff;
+    color: ${props => props.theme.colors.text};
    z-index: 10;
  }
 `;
@ -278,7 +276,7 @@ const HexadecimalWrapper = styled.div`
  cursor: pointer;

  &:hover {
-    opacity: 1;
+    opacity: 1;s
  }
 `;

@ -286,10 +284,33 @@ const HexadecimalText = styled(TextComponent)`
  white-space: nowrap;
 `;

+const SimpleTooltip = styled.div`
+  background: ${props => props.theme.colors.walletAddressTooltipBg};
+  position: absolute;
+  top: -30px;
+  right: 0px;
+  padding: 6px 10px;
+  border-radius: 3px;
+`;
+
+const TooltipText = styled(TextComponent)`
+  color: ${props => props.theme.colors.walletAddressTooltip};
+  font-size: 10px;
+  font-weight: 700;
+  text-align: center;
+`;
+
+const SendButtonWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`;
+
 type Props = {
  match: Match,
  theme: AppTheme,
-} & MapStateToProps & MapDispatchToProps;
+} & MapStateToProps &
+  MapDispatchToProps;

 type State = {
  showFee: boolean,
@ -453,18 +474,12 @@ class Component extends PureComponent<Props, State> {
    return isToAddressValid ? (
      <ValidateWrapper alignItems='center'>
        <ValidateStatusIcon src={ValidIcon} />
-        <ValidateItemLabel
-          value='VALID'
-          color={theme.colors.transactionReceived}
-        />
+        <ValidateItemLabel value='VALID' color={theme.colors.transactionReceived} />
      </ValidateWrapper>
    ) : (
      <ValidateWrapper alignItems='center'>
        <ValidateStatusIcon src={InvalidIcon} />
-        <ValidateItemLabel
-          value='INVALID'
-          color={theme.colors.transactionSent}
-        />
+        <ValidateItemLabel value='INVALID' color={theme.colors.transactionSent} />
      </ValidateWrapper>
    );
  };
@ -564,12 +579,20 @@ class Component extends PureComponent<Props, State> {
      addresses, balance, zecPrice, isSending, error, operationId, theme,
    } = this.props;
    const {
-      showFee, from, amount, to, memo, fee, feeType, isHexMemo, showBalanceTooltip,
+      showFee,
+      from,
+      amount,
+      to,
+      memo,
+      fee,
+      feeType,
+      isHexMemo,
+      showBalanceTooltip,
    } = this.state;

    const isEmpty = amount === '';

-    const fixedAmount = this.getAmountWithFee();
+    const fixedAmount = isEmpty || new BigNumber(amount).eq(0) ? 0 : this.getAmountWithFee();

    const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
    const zecBalanceInUsd = formatNumber({
@ -585,13 +608,9 @@ class Component extends PureComponent<Props, State> {
      append: 'USD $',
    });

-    const seeMoreIcon = theme.mode === DARK
-      ? MenuIconDark
-      : MenuIconLight;
+    const seeMoreIcon = theme.mode === DARK ? MenuIconDark : MenuIconLight;

-    const arrowUpIcon = theme.mode === DARK
-      ? ArrowUpIconDark
-      : ArrowUpIconLight;
+    const arrowUpIcon = theme.mode === DARK ? ArrowUpIconDark : ArrowUpIconLight;

    return (
      <RowComponent id='send-wrapper' justifyContent='space-between'>
@ -741,16 +760,13 @@ class Component extends PureComponent<Props, State> {
            showButtons={!isSending && !error && !operationId}
            onClose={this.reset}
            renderTrigger={toggle => (
-              <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' />
-                  </>
-                )}
-              >
+              <SendButtonWrapper>
+                {showBalanceTooltip ? (
+                  <SimpleTooltip>
+                    <TooltipText value='You do not seem' />
+                    <TooltipText value='to have enough funds' />
+                  </SimpleTooltip>
+                ) : null}
                <FormButton
                  onClick={() => this.showModal(toggle)}
                  id='send-submit-button'
@ -760,7 +776,7 @@ class Component extends PureComponent<Props, State> {
                  isFluid
                  disabled={this.shouldDisableSendButton()}
                />
-              </Tooltip>
+              </SendButtonWrapper>
            )}
          >
            {toggle => (
--- a/app/views/transactions.js
+++ b/app/views/transactions.js
@ -111,6 +111,7 @@ export class TransactionsView extends PureComponent<Props> {
        <TransactionItemComponent
          address={transaction.address}
          amount={transaction.amount}
+          fees={transaction.fees}
          date={transaction.date}
          transactionId={transaction.transactionId}
          type={transaction.type}
--- a/package.json
+++ b/package.json
@ -113,7 +113,6 @@
    "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",
--- a/public/flow-coverage-badge.svg
+++ b/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">90%</text><text x="107" y="14">90%</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">88%</text><text x="107" y="14">88%</text></g></svg>