Invest powerdown notify (#561)

* Add simple notification to powerDown request * create InfoIcon for transaction * Typos * Only allow digits and ‘.’ Into field, change validation to ‘warnings’ * add placeholder to form * Change normalizer and move to container * Fix input field on exchnage * nomalize invest field and check for zero amount * Add placeholders and adjust styles * add tx link to notification * Refactor notification saga * Remove redundant code * Add i18t to Dashboard * fix proptype * use BigNumber to compare strings on user input field * refactor to reduce redundant code: use shared util func * return 0. when the user enters just a '.' to avoid bignumber from crashing * remove redundant code, change notification saga for ETH_PAYOUT to match new style
acebusters · Sep 1, 2017 · 7147828 · 7147828
1 parent 7eb2345
commit 7147828
Show file tree

Hide file tree

Showing 21 changed files with 394 additions and 252 deletions.
diff --git a/app/components/Dashboard/Exchange.js b/app/components/Dashboard/Exchange.js
@@ -42,6 +42,7 @@ const Exchange = (props) => {
                   : nutzBalance,
                 nutzBalance
               )}
+              placeholder="0"
               {...props}
             />
           }
@@ -57,6 +58,7 @@ const Exchange = (props) => {
                   : ethBalance,
                 ethBalance
               )}
+              placeholder="0.00"
               {...props}
             />
           }

diff --git a/app/components/Dashboard/Overview.js b/app/components/Dashboard/Overview.js
@@ -15,6 +15,7 @@ import { Pane, SectionOverview } from './styles';
 const Overview = (props) => {
   const { account, listTxns, downRequests, ethAllowance, ethPayoutDate, ethPayoutPending, handleETHPayout } = props;
   const requestColumnStyle = { width: 20, textAlign: 'left', whiteSpace: 'nowrap' };
+  const ethAmount = formatEth(ethAllowance);
 
   return (
     <Pane name="dashboard-overview">
@@ -27,11 +28,11 @@ const Overview = (props) => {
         >
           <H2><FormattedMessage {...messages.ethPayout} /></H2>
           <p style={{ fontSize: 18, margin: '-5px 0 10px' }}>
-            {formatEth(ethAllowance)} ETH
+            {ethAmount} ETH
           </p>
           <TimedButton
             until={ethPayoutDate.toNumber()}
-            onClick={handleETHPayout}
+            onClick={() => handleETHPayout(ethAmount)}
             disabled={ethPayoutPending}
           >
             Execute Pay-out

diff --git a/app/components/Dashboard/Wallet.js b/app/components/Dashboard/Wallet.js
@@ -17,17 +17,14 @@ import { AccountIsLocked, AccountNotLocked } from './SectionReceive';
 const Wallet = (props) => {
   const {
     account,
-    // babzBalance,
     ethBalance,
     nutzBalance,
     handleNTZTransfer,
     handleETHTransfer,
     amountUnit,
-    // weiBalance,
   } = props;
   return (
     <Pane name="dashboard-wallet">
-
       <Section
         style={{ alignSelf: 'center', maxWidth: 480 }}
         name="wallet-receive"
@@ -48,13 +45,15 @@ const Wallet = (props) => {
               handleTransfer={handleETHTransfer}
               maxAmount={ethBalance}
               type="token"
+              placeholder="0.00"
               {...props}
             />
           :
             <TransferDialog
               handleTransfer={handleNTZTransfer}
               maxAmount={nutzBalance}
               type="token"
+              placeholder="0"
               {...props}
             />
           }
@@ -67,13 +66,11 @@ const Wallet = (props) => {
 
 Wallet.propTypes = {
   account: PropTypes.object,
-  // babzBalance: PropTypes.object,
   ethBalance: PropTypes.object,
   nutzBalance: PropTypes.object,
   handleNTZTransfer: PropTypes.func,
   handleETHTransfer: PropTypes.func,
   amountUnit: PropTypes.string,
-  // weiBalance: PropTypes.object,
 };
 
 export default Wallet;
diff --git a/app/components/ExchangeDialog/index.js b/app/components/ExchangeDialog/index.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form } from 'redux-form/immutable';
+import { Form, Field } from 'redux-form/immutable';
 import { FormattedMessage } from 'react-intl';
 
-import { NTZ_DECIMALS, ETH_DECIMALS, formatNtz, formatEth } from '../../utils/amountFormatter';
+import { NTZ_DECIMALS, ETH_DECIMALS, formatNtz, formatEth, normalizerFloat } from '../../utils/amountFormatter';
 import { round } from '../../utils';
 
 import NoWeb3Message from '../Web3Alerts/NoWeb3';
 import UnsupportedNetworkMessage from '../Web3Alerts/UnsupportedNetwork';
 import SubmitButton from '../SubmitButton';
 import TokenAmountField from '../Form/TokenAmountField';
-import AmountField from '../AmountField';
 import H2 from '../H2';
 
 import {
@@ -52,6 +51,7 @@ class ExchangeDialog extends React.Component { // eslint-disable-line react/pref
       invalid,
       hasWeb3,
       networkSupported,
+      placeholder,
     } = this.props;
     const expectedAmountUnit = amountUnit.toLowerCase() === 'ntz' ? 'eth' : 'ntz';
     const formatExpValue = expectedAmountUnit === 'ntz' ? formatNtz : formatEth;
@@ -62,7 +62,8 @@ class ExchangeDialog extends React.Component { // eslint-disable-line react/pref
         {title && <H2>{title}</H2>}
 
         <Form onSubmit={handleSubmit(this.handleSubmit)}>
-          <AmountField
+          <Field
+            normalize={normalizerFloat}
             name="amount"
             component={TokenAmountField}
             label={<FormattedMessage {...messages.sellTitle} />}
@@ -74,6 +75,7 @@ class ExchangeDialog extends React.Component { // eslint-disable-line react/pref
             amountUnit={this.props.amountUnit}
             setAmountUnit={this.props.setAmountUnit}
             reset={this.props.reset}
+            placeholder={placeholder}
           />
 
           {calcExpectedAmount && expectedAmountUnit &&
@@ -120,10 +122,11 @@ ExchangeDialog.propTypes = {
   handleSubmit: PropTypes.func,
   handleExchange: PropTypes.func, // eslint-disable-line
   stopSubmit: PropTypes.func,
-  amount: PropTypes.number,
+  amount: PropTypes.string,
   title: PropTypes.node,
   amountUnit: PropTypes.string.isRequired,
   reset: PropTypes.func,
+  placeholder: PropTypes.string,
 };
 
 export default ExchangeDialog;
diff --git a/app/components/FormMessages/index.js b/app/components/FormMessages/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import {
@@ -35,7 +36,7 @@ export function ErrorMessage(props) {
 }
 
 ErrorMessage.propTypes = {
-  error: React.PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 export function WarningMessage(props) {
@@ -49,4 +50,3 @@ export function WarningMessage(props) {
 WarningMessage.propTypes = {
   warning: React.PropTypes.string,
 };
-
diff --git a/app/components/Notifications/Notification.js b/app/components/Notifications/Notification.js
@@ -20,6 +20,7 @@ const Notification = ({
   removing,
   type,
   txId,
+  infoIcon,
 }) => (
   <Container
     name="notification-container"
@@ -37,21 +38,19 @@ const Notification = ({
           </ButtonWrapper>
           :
           <ButtonWrapper>
-            <Icon className="fa fa-info-circle" />
+            {infoIcon && infoIcon}
           </ButtonWrapper>
         }
       </IconWrapper>
     </Wrapper>
   </Container>
 );
 Notification.propTypes = {
-  category: PropTypes.string,
-  details: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-  ]),
+  category: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  details: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   dismissable: PropTypes.bool,
   isNotTable: PropTypes.bool,
+  infoIcon: PropTypes.node,
   notifyRemove: PropTypes.func,
   removing: PropTypes.bool,
   type: PropTypes.string,
@@ -62,6 +61,7 @@ Notification.defaultProps = {
   details: '',
   dismissable: true,
   isNotTable: false,
+  infoIcon: null,
   removing: false,
   type: 'danger',
   txId: '',

diff --git a/app/components/Notifications/styles.js b/app/components/Notifications/styles.js
@@ -73,7 +73,7 @@ export const Category = styled.h3`
 `;
 
 export const Details = styled.span`
-  padding-left: 8px;
+  padding: 0 8px;
   font-size: 12px;
 `;
 

diff --git a/app/components/TransferDialog/Default.js b/app/components/TransferDialog/Default.js
@@ -8,7 +8,6 @@ import UnsupportedNetworkMessage from '../Web3Alerts/UnsupportedNetwork';
 import { ErrorMessage } from '../FormMessages';
 import SubmitButton from '../SubmitButton';
 import FormField from '../Form/FormField';
-import AmountField from '../AmountField';
 import H2 from '../H2';
 
 class DefaultDialog extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -29,7 +28,6 @@ class DefaultDialog extends React.Component { // eslint-disable-line react/prefe
       error,
       handleSubmit,
       submitting,
-      amountUnit,
       maxAmount,
       minAmount,
       hideAddress,
@@ -38,20 +36,25 @@ class DefaultDialog extends React.Component { // eslint-disable-line react/prefe
       invalid,
       hasWeb3,
       networkSupported,
+      normalizer,
+      label,
+      placeholder,
     } = this.props;
 
     return (
       <div>
         {title && <H2>{title}</H2>}
         {description && <p>{description}</p>}
         <Form onSubmit={handleSubmit(this.handleSubmit)}>
-          <AmountField
+          <Field
+            normalize={normalizer}
             name="amount"
             component={FormField}
-            label={`Amount (${amountUnit})`}
             autoFocus
             minAmount={minAmount}
             maxAmount={maxAmount}
+            label={label}
+            placeholder={placeholder}
           />
 
           {!hideAddress &&
@@ -90,11 +93,13 @@ DefaultDialog.propTypes = {
   hideAddress: PropTypes.bool,
   maxAmount: PropTypes.object, // BigNumber
   minAmount: PropTypes.object, // BigNumber
-  amountUnit: PropTypes.string,
   handleSubmit: PropTypes.func,
   handleTransfer: PropTypes.func,
   error: PropTypes.any,
   reset: PropTypes.func,
+  normalizer: PropTypes.func.isRequired,
+  label: PropTypes.node.isRequired,
+  placeholder: PropTypes.string,
 };
 
 DefaultDialog.defaultProps = {

diff --git a/app/components/TransferDialog/PowerDown.js b/app/components/TransferDialog/PowerDown.js
@@ -9,36 +9,42 @@ import Alert from '../Alert';
 
 import { Description } from './styles';
 
-const PowerDown = ({
-  messages,
-  totalSupply,
-  pwrBalance,
-  handlePowerDown,
-}) => (
-  <div>
-    <Description>
-      <FormattedHTMLMessage
-        {...messages.powerDownDescr}
-        values={{
-          min: totalSupply.div(10000).div(ABP_DECIMALS).ceil().toNumber(),
-        }}
-      />
-    </Description>
-    {pwrBalance && pwrBalance.equals(0) ?
-      <Alert theme="warning">
-        <FormattedMessage {...messages.powerDownPrereq} />
-      </Alert>
-      :
-      <TransferDialog
-        handleTransfer={handlePowerDown}
-        maxAmount={pwrBalance.div(ABP_DECIMALS)}
-        minAmount={totalSupply.div(10000).div(ABP_DECIMALS).ceil()}
-        hideAddress
-        amountUnit="ABP"
-      />
-    }
-  </div>
-);
+const PowerDown = (props) => {
+  const {
+    messages,
+    totalSupply,
+    pwrBalance,
+    handlePowerDown,
+  } = props;
+  return (
+    <div>
+      <Description>
+        <FormattedHTMLMessage
+          {...messages.powerDownDescr}
+          values={{
+            min: totalSupply.div(10000).div(ABP_DECIMALS).ceil().toNumber(),
+          }}
+        />
+      </Description>
+      {pwrBalance && pwrBalance.equals(0) ?
+        <Alert theme="warning">
+          <FormattedMessage {...messages.powerDownPrereq} />
+        </Alert>
+        :
+        <TransferDialog
+          handleTransfer={handlePowerDown}
+          maxAmount={pwrBalance.div(ABP_DECIMALS)}
+          minAmount={totalSupply.div(10000).div(ABP_DECIMALS).ceil()}
+          hideAddress
+          label={<FormattedMessage {...messages.powerDownAmountLabel} />}
+          amountUnit="ABP"
+          placeholder="0.00"
+          {...props}
+        />
+      }
+    </div>
+  );
+};
 PowerDown.propTypes = {
   messages: PropTypes.object.isRequired,
   totalSupply: PropTypes.object.isRequired,

diff --git a/app/components/TransferDialog/PowerUp.js b/app/components/TransferDialog/PowerUp.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedHTMLMessage } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 
 import TransferDialog from '../../containers/TransferDialog';
 
@@ -25,8 +25,11 @@ const PowerUp = (props) => {
         <TransferDialog
           handleTransfer={handlePowerUp}
           maxAmount={nutzBalance}
+          label={<FormattedMessage {...messages.powerUpAmountLabel} />}
           hideAddress
           amountUnit="NTZ"
+          placeholder="0"
+          {...props}
         />
         :
         <Alert theme="warning">