Merge pull request #1127 from MyCryptoHQ/develop

Tag Beta 0.3.0

README.md

@@ -1,6 +1,7 @@
 # MyCrypto Beta (VISIT [MyCryptoHQ/mycrypto.com](https://github.com/MyCryptoHQ/mycrypto.com) for the current site)<br/>Just looking to download? Grab our [latest release](https://github.com/MyCryptoHQ/MyCrypto/releases)
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/MyCryptoHq/MyCrypto.svg)](https://greenkeeper.io/)
+[![Coverage Status](https://coveralls.io/repos/github/MyCryptoHQ/MyCrypto/badge.svg?branch=develop)](https://coveralls.io/github/MyCryptoHQ/MyCrypto?branch=develop)
 
 ## Running the App
 

common/Root.tsx

@@ -9,6 +9,7 @@ import SendTransaction from 'containers/Tabs/SendTransaction';
 import Swap from 'containers/Tabs/Swap';
 import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage';
 import BroadcastTx from 'containers/Tabs/BroadcastTx';
+import CheckTransaction from 'containers/Tabs/CheckTransaction';
 import ErrorScreen from 'components/ErrorScreen';
 import PageNotFound from 'components/PageNotFound';
 import LogOutPrompt from 'components/LogOutPrompt';
@@ -67,6 +68,7 @@ export default class Root extends Component<Props, State> {
           <Route path="/contracts" component={Contracts} />
           <Route path="/ens" component={ENS} exact={true} />
           <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
+          <Route path="/tx-status" component={CheckTransaction} exact={true} />
           <Route path="/pushTx" component={BroadcastTx} />
           <RouteNotFound />
         </Switch>
@@ -120,8 +122,7 @@ const LegacyRoutes = withRouter(props => {
         history.push('/account/info');
         break;
       case '#check-tx-status':
-        history.push('/check-tx-status');
-        break;
+        return <RedirectWithQuery from={pathname} to={'/tx-status'} />;
     }
   }
 

common/actions/gas/actionCreators.ts

@@ -0,0 +1,19 @@
+import * as interfaces from './actionTypes';
+import { TypeKeys } from './constants';
+
+export type TFetchGasEstimates = typeof fetchGasEstimates;
+export function fetchGasEstimates(): interfaces.FetchGasEstimatesAction {
+  return {
+    type: TypeKeys.GAS_FETCH_ESTIMATES
+  };
+}
+
+export type TSetGasEstimates = typeof setGasEstimates;
+export function setGasEstimates(
+  payload: interfaces.SetGasEstimatesAction['payload']
+): interfaces.SetGasEstimatesAction {
+  return {
+    type: TypeKeys.GAS_SET_ESTIMATES,
+    payload
+  };
+}

common/actions/gas/actionTypes.ts

@@ -0,0 +1,14 @@
+import { TypeKeys } from './constants';
+import { GasEstimates } from 'api/gas';
+
+export interface FetchGasEstimatesAction {
+  type: TypeKeys.GAS_FETCH_ESTIMATES;
+}
+
+export interface SetGasEstimatesAction {
+  type: TypeKeys.GAS_SET_ESTIMATES;
+  payload: GasEstimates;
+}
+
+/*** Union Type ***/
+export type GasAction = FetchGasEstimatesAction | SetGasEstimatesAction;

common/actions/gas/constants.ts

@@ -0,0 +1,4 @@
+export enum TypeKeys {
+  GAS_FETCH_ESTIMATES = 'GAS_FETCH_ESTIMATES',
+  GAS_SET_ESTIMATES = 'GAS_SET_ESTIMATES'
+}

common/actions/gas/index.ts

@@ -0,0 +1,3 @@
+export * from './actionCreators';
+export * from './actionTypes';
+export * from './constants';

common/actions/transactions/actionCreators.ts

@@ -0,0 +1,20 @@
+import * as interfaces from './actionTypes';
+import { TypeKeys } from './constants';
+
+export type TFetchTransactionData = typeof fetchTransactionData;
+export function fetchTransactionData(txhash: string): interfaces.FetchTransactionDataAction {
+  return {
+    type: TypeKeys.TRANSACTIONS_FETCH_TRANSACTION_DATA,
+    payload: txhash
+  };
+}
+
+export type TSetTransactionData = typeof setTransactionData;
+export function setTransactionData(
+  payload: interfaces.SetTransactionDataAction['payload']
+): interfaces.SetTransactionDataAction {
+  return {
+    type: TypeKeys.TRANSACTIONS_SET_TRANSACTION_DATA,
+    payload
+  };
+}

common/actions/transactions/actionTypes.ts

@@ -0,0 +1,20 @@
+import { TypeKeys } from './constants';
+import { TransactionData, TransactionReceipt } from 'libs/nodes';
+
+export interface FetchTransactionDataAction {
+  type: TypeKeys.TRANSACTIONS_FETCH_TRANSACTION_DATA;
+  payload: string;
+}
+
+export interface SetTransactionDataAction {
+  type: TypeKeys.TRANSACTIONS_SET_TRANSACTION_DATA;
+  payload: {
+    txhash: string;
+    data: TransactionData | null;
+    receipt: TransactionReceipt | null;
+    error: string | null;
+  };
+}
+
+/*** Union Type ***/
+export type TransactionsAction = FetchTransactionDataAction | SetTransactionDataAction;

common/actions/transactions/constants.ts

@@ -0,0 +1,5 @@
+export enum TypeKeys {
+  TRANSACTIONS_FETCH_TRANSACTION_DATA = 'TRANSACTIONS_FETCH_TRANSACTION_DATA',
+  TRANSACTIONS_SET_TRANSACTION_DATA = 'TRANSACTIONS_SET_TRANSACTION_DATA',
+  TRANSACTIONS_SET_TRANSACTION_ERROR = 'TRANSACTIONS_SET_TRANSACTION_ERROR'
+}

common/actions/transactions/index.ts

@@ -0,0 +1,3 @@
+export * from './actionCreators';
+export * from './actionTypes';
+export * from './constants';

common/api/gas.ts

@@ -0,0 +1,71 @@
+import { checkHttpStatus, parseJSON } from './utils';
+
+const MAX_GAS_FAST = 250;
+
+interface RawGasEstimates {
+  safeLow: number;
+  standard: number;
+  fast: number;
+  fastest: number;
+  block_time: number;
+  blockNum: number;
+}
+
+export interface GasEstimates {
+  safeLow: number;
+  standard: number;
+  fast: number;
+  fastest: number;
+  time: number;
+  isDefault: boolean;
+}
+
+export function fetchGasEstimates(): Promise<GasEstimates> {
+  return fetch('https://dev.blockscale.net/api/gasexpress.json', {
+    mode: 'cors'
+  })
+    .then(checkHttpStatus)
+    .then(parseJSON)
+    .then((res: object) => {
+      // Make sure it looks like a raw gas estimate, and it has valid values
+      const keys = ['safeLow', 'standard', 'fast', 'fastest'];
+      keys.forEach(key => {
+        if (typeof res[key] !== 'number') {
+          throw new Error(
+            `Gas estimate API has invalid shape: Expected numeric key '${key}' in response, got '${
+              res[key]
+            }' instead`
+          );
+        }
+      });
+
+      // Make sure the estimate isn't totally crazy
+      const estimateRes = res as RawGasEstimates;
+      if (estimateRes.fast > MAX_GAS_FAST) {
+        throw new Error(
+          `Gas estimate response estimate too high: Max fast is ${MAX_GAS_FAST}, was given ${
+            estimateRes.fast
+          }`
+        );
+      }
+
+      if (
+        estimateRes.safeLow > estimateRes.standard ||
+        estimateRes.standard > estimateRes.fast ||
+        estimateRes.fast > estimateRes.fastest
+      ) {
+        throw new Error(
+          `Gas esimates are in illogical order: should be safeLow < standard < fast < fastest, received ${
+            estimateRes.safeLow
+          } < ${estimateRes.standard} < ${estimateRes.fast} < ${estimateRes.fastest}`
+        );
+      }
+
+      return estimateRes;
+    })
+    .then((res: RawGasEstimates) => ({
+      ...res,
+      time: Date.now(),
+      isDefault: false
+    }));
+}

common/components/BalanceSidebar/AccountInfo.tsx

@@ -134,17 +134,21 @@ class AccountInfo extends React.Component<Props, State> {
                   symbol={balance.wei ? network.name : null}
                 />
               </span>
-              {balance.isPending ? (
-                <Spinner />
-              ) : (
-                !isOffline && (
-                  <button
-                    className="AccountInfo-section-refresh"
-                    onClick={this.props.setAccountBalance}
-                  >
-                    <i className="fa fa-refresh" />
-                  </button>
-                )
+              {balance.wei && (
+                <React.Fragment>
+                  {balance.isPending ? (
+                    <Spinner />
+                  ) : (
+                    !isOffline && (
+                      <button
+                        className="AccountInfo-section-refresh"
+                        onClick={this.props.setAccountBalance}
+                      >
+                        <i className="fa fa-refresh" />
+                      </button>
+                    )
+                  )}
+                </React.Fragment>
               )}
             </li>
           </ul>

common/components/BalanceSidebar/PromoComponents/Coinbase.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
+import { NewTabLink } from 'components/ui';
 
 export const Coinbase: React.SFC = () => (
-  <a
-    className="Promos-promo Promos-Coinbase"
-    target="_blank"
-    rel="noopener noreferrer"
+  <NewTabLink
+    className="Promos-promo Promos--coinbase"
     href="https://buy.coinbase.com?code=60c05061-3a76-57be-b1cd-a7afa97bcb8c&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD"
   >
     <div className="Promos-promo-inner">
@@ -17,5 +16,5 @@ export const Coinbase: React.SFC = () => (
         <img src={CoinbaseLogo} />
       </div>
     </div>
-  </a>
+  </NewTabLink>
 );

common/components/BalanceSidebar/PromoComponents/HardwareWallets.tsx

@@ -5,10 +5,7 @@ import ledgerLogo from 'assets/images/logo-ledger.svg';
 import trezorLogo from 'assets/images/logo-trezor.svg';
 
 export const HardwareWallets: React.SFC = () => (
-  <HelpLink
-    className="Promos-promo Promos-HardwareWallets"
-    article={HELP_ARTICLE.PROTECT_YOUR_FUNDS}
-  >
+  <HelpLink className="Promos-promo Promos--hardware" article={HELP_ARTICLE.PROTECT_YOUR_FUNDS}>
     <div className="Promos-promo-inner">
       <div className="Promos-promo-text">
         <h6>Learn more about protecting your funds.</h6>

common/components/BalanceSidebar/PromoComponents/Shapeshift.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ShapeshiftLogo from 'assets/images/logo-shapeshift.svg';
+
+export const Shapeshift: React.SFC = () => (
+  <Link className="Promos-promo Promos--shapeshift" to="/swap">
+    <div className="Promos-promo-inner">
+      <div className="Promos-promo-text">
+        <h5>
+          Exchange Coins
+          <br />
+          & Tokens with
+        </h5>
+      </div>
+      <div className="Promos-promo-images">
+        <img src={ShapeshiftLogo} />
+      </div>
+    </div>
+  </Link>
+);

common/components/BalanceSidebar/PromoComponents/index.ts

@@ -1,3 +1,3 @@
 export * from './HardwareWallets';
 export * from './Coinbase';
-export * from './Bity';
+export * from './Shapeshift';

common/components/BalanceSidebar/Promos.scss

@@ -9,18 +9,6 @@
     overflow: hidden;
   }
 
-  &-Bity {
-    background-color: #006e79;
-  }
-
-  &-Coinbase {
-    background-color: #2b71b1;
-  }
-
-  &-HardwareWallets {
-    background-color: #6e9a3e;
-  }
-
   &-promo {
     position: relative;
     height: inherit;
@@ -42,19 +30,18 @@
       position: absolute;
       display: flex;
       align-items: center;
+      justify-content: center;
       top: 50%;
       left: 0;
       width: 100%;
       transform: translateY(-50%);
-    }
-
-    &-text,
-    &-images {
-      padding: 0 $space-sm;
+      padding: 0 $space;
     }
 
     &-text {
-      flex: 1;
+      flex: 5;
+      padding-right: $space-xs;
+      max-width: 220px;
 
       p,
       h4,
@@ -73,15 +60,15 @@
     }
 
     &-images {
-      padding: 0 $space * 1.5;
+      flex: 3;
+      max-width: 108px;
+      padding-left: $space-xs;
 
       img {
         display: block;
         margin: 0 auto;
         width: 100%;
-        max-width: 96px;
         height: auto;
-        padding: $space-xs;
       }
     }
   }
@@ -106,6 +93,23 @@
       }
     }
   }
+
+  // Per-promo customizations
+  &--shapeshift {
+    background-color: #263A52;
+
+    .Promos-promo-images {
+      max-width: 130px;
+    }
+  }
+
+  &--coinbase {
+    background-color: #2b71b1;
+  }
+
+  &--hardware {
+    background-color: #6e9a3e;
+  }
 }
 
 .carousel-exit {