show usd balance under eth token balance

TODO:

* show usd amount in txForm Field
* show usd txCost in txForm Field

packages/fether-react/src/Send/TxForm/TxForm.js

@@ -106,6 +106,14 @@ class Send extends Component {
                             step={0.5}
                             type='range' // In Gwei
                           />
+                          {values.to === values.from && (
+                            <span>
+                              <h3>WARNING:</h3>
+                              <p>
+                                The sender and receiver addresses are the same.
+                              </p>
+                            </span>
+                          )}
                         </fieldset>
                         <nav className='form-nav'>
                           <button
@@ -170,6 +178,7 @@ class Send extends Component {
 
   validateForm = values => {
     const errors = {};
+
     if (!isAddress(values.to)) {
       errors.to = 'Please enter a valid Ethereum address';
     }

packages/fether-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js

@@ -10,7 +10,8 @@ import { TokenCard } from 'fether-ui';
 import { withRouter } from 'react-router-dom';
 
 import withAccount from '../../../utils/withAccount.js';
-import withBalance from '../../../utils/withBalance';
+import withBalance from '../../../utils/withBalance.js';
+import { estimateUsd } from '../../../utils/estimateUsd';
 
 @withRouter
 @withAccount
@@ -21,6 +22,20 @@ class TokenBalance extends Component {
     token: PropTypes.object
   };
 
+  state = {
+    usdBalance: null
+  };
+
+  componentDidMount = async () => {
+    const { balance, token } = this.props;
+
+    if (token.symbol === 'ETH') {
+      this.setState({
+        usdBalance: (await estimateUsd()) * balance
+      });
+    }
+  };
+
   handleClick = () => {
     const { accountAddress, history, sendStore, token } = this.props;
     if (!token.address) {
@@ -31,7 +46,15 @@ class TokenBalance extends Component {
   };
 
   render () {
-    return <TokenCard onClick={this.handleClick} {...this.props} />;
+    const { usdBalance } = this.state;
+
+    return (
+      <TokenCard
+        onClick={this.handleClick}
+        usdBalance={usdBalance}
+        {...this.props}
+      />
+    );
   }
 }
 

packages/fether-react/src/assets/sass/components/_token.scss

-.token {
+.token, .token_usd {
   display: flex;
   align-items: center;
   align-content: center;
@@ -36,7 +36,7 @@
     height: ms(0) * 1.3;
   }
 
-  .token_symbol {
+  .token_symbol, .token_symbol_usd {
     height: ms(0) * 1.3;
     font-size: ms(-2);
     &:before {

packages/fether-react/src/utils/estimateUsd.js

+/**
+ * Estimate ETHUSD
+ */
+
+export const estimateUsd = () => {
+  return fetch('https://api.etherscan.io/api?module=stats&action=ethprice')
+    .then(data => data.json())
+    .then(data => {
+      return data.result.ethusd;
+    });
+};

packages/fether-ui/src/TokenCard/TokenCard.js

@@ -11,6 +11,7 @@ import { Placeholder } from '../Placeholder';
 
 export const TokenCard = ({
   balance,
+  usdBalance,
   children,
   decimals,
   showBalance,
@@ -33,13 +34,22 @@ export const TokenCard = ({
           <Placeholder height={20} width={100} />
         )}
       </div>
-      <div className='token_balance'>
-        {balance ? (
-          <span>{balance.toFixed(decimals)} </span>
-        ) : showBalance ? (
-          <Placeholder height={20} width={50} />
+      <div className='token_balances'>
+        <div className='token_balance'>
+          {balance ? (
+            <span>{balance.toFixed(decimals)} </span>
+          ) : showBalance ? (
+            <Placeholder height={20} width={50} />
+          ) : null}
+          <span className='token_symbol'>{token && token.symbol}</span>
+        </div>
+        {usdBalance !== null ? (
+          <div className='token_usd'>
+            <div className='token_balance'>
+              {<span className='token_symbol_usd'>{`${usdBalance} USD`}</span>}
+            </div>
+          </div>
         ) : null}
-        <span className='token_symbol'>{token && token.symbol}</span>
       </div>
       {children}
     </div>