Merge pull request #1288 from MyCryptoHQ/develop

Tag Release 0.5.1
2018-03-07 10:56:01 -06:00 · 2018-03-07 10:56:01 -06:00 · 65daeeeef4
parent 71b68dd5cb 0e26f7af4c
commit 65daeeeef4
10 changed files with 147 additions and 61 deletions
--- a/common/assets/images/logo-shapeshift-no-text.svg
+++ b/common/assets/images/logo-shapeshift-no-text.svg
@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="81px" height="120px" viewBox="0 0 81 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="100.099854%" y1="-16.122731%" x2="44.1579795%" y2="77.6511455%" id="linearGradient-1">
+            <stop stop-color="#2B415B" offset="13.45%"></stop>
+            <stop stop-color="#3B5676" offset="37.62%"></stop>
+            <stop stop-color="#54769E" offset="69.23%"></stop>
+            <stop stop-color="#52749B" offset="79.01%"></stop>
+            <stop stop-color="#4D6C92" offset="86.14%"></stop>
+            <stop stop-color="#436082" offset="92.44%"></stop>
+            <stop stop-color="#364F6C" offset="98.22%"></stop>
+            <stop stop-color="#314863" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="99.7887646%" y1="61.4941149%" x2="-4.60729499%" y2="13.3460499%" id="linearGradient-2">
+            <stop stop-color="#54769E" offset="0%"></stop>
+            <stop stop-color="#53749C" offset="48.02%"></stop>
+            <stop stop-color="#4F6F95" offset="68.78%"></stop>
+            <stop stop-color="#486588" offset="84.23%"></stop>
+            <stop stop-color="#435F80" offset="90.95%"></stop>
+        </linearGradient>
+        <linearGradient x1="725.856983%" y1="50.0229457%" x2="-347.124022%" y2="50.0229457%" id="linearGradient-3">
+            <stop stop-color="#20344C" offset="25.39%"></stop>
+            <stop stop-color="#273D57" offset="40.72%"></stop>
+            <stop stop-color="#395373" offset="67.33%"></stop>
+            <stop stop-color="#54769E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-653.788268%" y1="50.0214562%" x2="455.494413%" y2="50.0214562%" id="linearGradient-4">
+            <stop stop-color="#54769E" offset="25.39%"></stop>
+            <stop stop-color="#4D6E93" offset="41.33%"></stop>
+            <stop stop-color="#3C5777" offset="68.97%"></stop>
+            <stop stop-color="#233850" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50.0370086%" y1="-209.335792%" x2="49.9575834%" y2="235.965027%" id="linearGradient-5">
+            <stop stop-color="#54769E" offset="0.6545247%"></stop>
+            <stop stop-color="#507198" offset="19.93%"></stop>
+            <stop stop-color="#466488" offset="45.02%"></stop>
+            <stop stop-color="#354F6D" offset="73.18%"></stop>
+            <stop stop-color="#21354D" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="163.859644%" y1="-95.5767241%" x2="-53.1396713%" y2="173.049483%" id="linearGradient-6">
+            <stop stop-color="#54769E" offset="25.39%"></stop>
+            <stop stop-color="#4D6E93" offset="41.02%"></stop>
+            <stop stop-color="#3C5777" offset="68.13%"></stop>
+            <stop stop-color="#22364E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-44.1116757%" y1="-60.1463542%" x2="137.687762%" y2="146.957292%" id="linearGradient-7">
+            <stop stop-color="#54769E" offset="25.39%"></stop>
+            <stop stop-color="#4D6E93" offset="41.02%"></stop>
+            <stop stop-color="#3C5777" offset="68.13%"></stop>
+            <stop stop-color="#22364E" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-1.43584837%" y1="31.6007047%" x2="127.701745%" y2="103.798097%" id="linearGradient-8">
+            <stop stop-color="#54769E" offset="26.64%"></stop>
+            <stop stop-color="#425E7F" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-71.276129%" y1="-65.3137535%" x2="149.174581%" y2="96.3311507%" id="linearGradient-9">
+            <stop stop-color="#54769E" stop-opacity="0" offset="46.09%"></stop>
+            <stop stop-color="#52739A" stop-opacity="0.2156" offset="56.99%"></stop>
+            <stop stop-color="#4A698E" stop-opacity="0.4266" offset="67.64%"></stop>
+            <stop stop-color="#3D597B" stop-opacity="0.6356" offset="78.2%"></stop>
+            <stop stop-color="#2C435F" stop-opacity="0.8422" offset="88.63%"></stop>
+            <stop stop-color="#1B2E45" offset="96.61%"></stop>
+        </linearGradient>
+        <linearGradient x1="50.309375%" y1="295.997443%" x2="50.309375%" y2="-124.649242%" id="linearGradient-10">
+            <stop stop-color="#54769E" offset="25.39%"></stop>
+            <stop stop-color="#4D6E93" offset="41.02%"></stop>
+            <stop stop-color="#3C5777" offset="68.13%"></stop>
+            <stop stop-color="#22364E" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" fill-rule="nonzero">
+            <g id="logo-shapeshift">
+                <polygon id="Shape" fill="#273C51" points="75.9045553 29.0113736 81 0.0349956255 59.7045553 8.88888889 36.3006508 8.88888889 15.0052061 0 20.1357918 29.0113736 15.3214751 45.1793526 19.8546638 48.0139983 0 65.3718285 0 81.67979 22.7010846 112.825897 44.1019523 119.965004 44.1370933 120 60.8642082 111.461067 60.8993492 111.426072 60.8993492 98.7926509 51.4112798 93.6132983 51.4112798 93.6132983 51.4112798 93.6132983 66.3110629 54.1032371 66.2056399 54.1032371 80.683731 45.1793526"></polygon>
+                <g id="Group">
+                    <polygon id="Shape" fill="url(#linearGradient-1)" points="34.2584416 35.3372093 0 65.2325581 47.7233766 92.5465116 47.8987013 36.244186"></polygon>
+                    <polygon id="Shape" fill="#466284" points="29.3844156 53.8255814 47.7584416 102.697674 47.8987013 56.5465116"></polygon>
+                    <polygon id="Shape" fill="#354D6A" points="66.1675325 54 47.7584416 102.697674 47.8987013 56.5465116"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-2)" points="80.8246753 0.104651163 62.5558442 9.6627907 47.9337662 12.8372093 33.1714286 9.6627907 14.9727273 0.0697674419 21.2493506 28.9186047 15.2883117 45.1046512 36.187013 58.0116279 47.7935065 70.5697674 47.7935065 70.6744186 47.8636364 70.6046512 47.9337662 70.6744186 47.9337662 70.5697674 59.5402597 58.0116279 80.5090909 45.1046512 74.5480519 28.9534884"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-3)" points="80.8246753 0.104651163 75.7402597 28.9883721 80.5090909 45.1046512 74.5480519 28.9534884"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-4)" points="14.9727273 0.0697674419 20.0922078 28.9883721 15.2883117 45.1046512 21.2493506 28.9186047"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-5)" points="14.9727273 0.0697674419 36.2220779 8.93023256 59.5753247 8.93023256 80.8246753 0.104651163 62.5558442 9.6627907 47.9337662 12.8372093 33.1714286 9.6627907"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-6)" points="21.2493506 28.9186047 20.1974026 31.8139535 42.2532468 11.5813953"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-7)" points="74.5480519 28.9534884 53.6493506 11.5813953 75.5649351 31.6744186"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-8)" points="0 65.2325581 51.3 93.3837209 57.787013 109.534884 44.0415584 114.732558 22.6519481 112.534884 0 81.4883721"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="42.4636364 88.5348837 22.7220779 112.465116 22.6519481 112.534884 44.0064935 119.651163 44.0415584 119.686047 60.7324675 111.174419 60.7675325 111.139535 60.7675325 98.5465116"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-9)" points="74.5480519 28.9534884 80.8246753 0.104651163 62.5558442 9.6627907 53.6493506 11.5813953"></polygon>
+                    <polygon id="Shape" fill="#FFFFFF" points="47.8987013 70.6744186 42.112987 64.3604651 47.8987013 58.0116279 53.7194805 64.3604651"></polygon>
+                    <polygon id="Shape" fill="url(#linearGradient-10)" points="47.3376623 12.6976744 47.9337662 12.8372093 48.4597403 12.7325581 47.8987013 49.5348837"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/common/components/BalanceSidebar/PromoComponents/Coinbase.tsx
+++ b/common/components/BalanceSidebar/PromoComponents/Coinbase.tsx
@ -2,10 +2,14 @@ import React from 'react';
 import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
 import { NewTabLink } from 'components/ui';

-export const Coinbase: React.SFC = () => (
+interface Props {
+  address: string;
+}
+
+export const Coinbase: React.SFC<Props> = ({ address }) => (
  <NewTabLink
    className="Promos-promo Promos--coinbase"
-    href="https://buy.coinbase.com?code=60c05061-3a76-57be-b1cd-a7afa97bcb8c&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD"
+    href={`https://buy.coinbase.com?code=60c05061-3a76-57be-b1cd-a7afa97bcb8c&address=${address}&crypto_currency=ETH&currency=USD`}
  >
    <div className="Promos-promo-inner">
      <div className="Promos-promo-text">
--- a/common/components/BalanceSidebar/Promos.tsx
+++ b/common/components/BalanceSidebar/Promos.tsx
@ -2,8 +2,8 @@ import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { HardwareWallets, Coinbase, Shapeshift } from './PromoComponents';
 import './Promos.scss';
-
-const promos = [HardwareWallets, Coinbase, Shapeshift];
+import { connect } from 'react-redux';
+import { AppState } from '../../reducers';

 const CarouselAnimation = ({ children, ...props }) => (
  <CSSTransition {...props} timeout={300} classNames="carousel">
@ -11,12 +11,20 @@ const CarouselAnimation = ({ children, ...props }) => (
  </CSSTransition>
 );

+// Don't change Coinbase index
+const promos = [HardwareWallets, Coinbase, Shapeshift];
+
 interface State {
  activePromo: number;
 }

-export default class Promos extends React.PureComponent<{}, State> {
+interface StateProps {
+  wallet: AppState['wallet']['inst'];
+}
+
+class PromosClass extends React.PureComponent<StateProps, State> {
  public timer: any = null;
+  public promos = [HardwareWallets, Coinbase, Shapeshift];

  public state = {
    activePromo: parseInt(String(Math.random() * promos.length), 10)
@ -30,13 +38,27 @@ export default class Promos extends React.PureComponent<{}, State> {
    clearInterval(this.timer);
  }

+  public getPromo() {
+    const { activePromo } = this.state;
+    const { wallet } = this.props;
+    if (activePromo === 1) {
+      if (wallet) {
+        return <Coinbase address={wallet.getAddressString()} />;
+      } else {
+        return <Shapeshift />;
+      }
+    } else {
+      return promos[activePromo];
+    }
+  }
+
  public render() {
    const { activePromo } = this.state;

    return (
      <div className="Promos">
        <TransitionGroup className="Promos-promo-wrapper">
-          <CarouselAnimation key={Math.random()}>{promos[activePromo]}</CarouselAnimation>
+          <CarouselAnimation key={Math.random()}>{this.getPromo()}</CarouselAnimation>
        </TransitionGroup>
        <div className="Promos-nav">
          {promos.map((_, index) => {
@ -64,3 +86,11 @@ export default class Promos extends React.PureComponent<{}, State> {
    this.setState({ activePromo });
  };
 }
+
+function mapStateToProps(state: AppState): StateProps {
+  return {
+    wallet: state.wallet.inst
+  };
+}
+
+export default connect(mapStateToProps, {})(PromosClass);
--- a/common/components/Header/components/NavigationLink.scss
+++ b/common/components/Header/components/NavigationLink.scss
@ -51,7 +51,7 @@
  margin-top: -.1rem;
  width: 1.3rem;
  height: 1.3rem;
-  background-image: url('~assets/images/swap.svg');
+  background-image: url('~assets/images/logo-shapeshift-no-text.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
--- a/common/containers/Tabs/Swap/components/CurrentRates.scss
+++ b/common/containers/Tabs/Swap/components/CurrentRates.scss
@ -2,6 +2,8 @@
@import "common/sass/mixins";

 .SwapRates {
+  margin-bottom: $space;
+
  &-title {
    margin-top: 0;
    text-align: center;
--- a/common/containers/Tabs/Swap/components/PartThree.tsx
+++ b/common/containers/Tabs/Swap/components/PartThree.tsx
@ -5,7 +5,8 @@ import {
  TStartPollShapeshiftOrderStatus,
  TStopOrderTimerSwap,
  TStopPollBityOrderStatus,
-  TStopPollShapeshiftOrderStatus
+  TStopPollShapeshiftOrderStatus,
+  TStartOrderTimerSwap
 } from 'actions/swap';
 import { SwapInput } from 'reducers/swap/types';
 import React, { PureComponent } from 'react';
@ -28,6 +29,7 @@ interface ReduxStateProps {
 }

 interface ReduxActionProps {
+  startOrderTimerSwap: TStartOrderTimerSwap;
  restartSwap: TRestartSwap;
  startPollBityOrderStatus: TStartPollBityOrderStatus;
  stopPollBityOrderStatus: TStopPollBityOrderStatus;
@ -45,6 +47,7 @@ export default class PartThree extends PureComponent<ReduxActionProps & ReduxSta
    } else {
      this.props.startPollBityOrderStatus();
    }
+    this.props.startOrderTimerSwap();
  }

  public componentWillUnmount() {
--- a/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss
+++ b/common/containers/Tabs/Swap/components/ShapeshiftBanner.scss
@ -1,31 +0,0 @@
-@import 'common/sass/variables';
-
-.ShapeshiftBanner {
-  margin: $space 0;
-  text-align: center;
-
-  &-banner {
-    display: inline-block;
-    text-align: left;
-    padding: $space-sm $space;
-    background-color: #3a526d;
-    border-radius: 3px;
-    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1), inset 0 0 3px 0 rgba(0,0,0,0.1);
-    p {
-      display: inline-block;
-      color: white;
-      vertical-align: middle;
-      margin-bottom: 0px;
-
-      b {
-        margin-right: 5px;
-      }
-    }
-    img {
-      display: inline-block;
-      height: 32px;
-      box-sizing: content-box;
-      margin-left: 8px;
-    }
-  }
-}
--- a/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx
+++ b/common/containers/Tabs/Swap/components/ShapeshiftBanner.tsx
@ -1,17 +0,0 @@
-import React from 'react';
-import './ShapeshiftBanner.scss';
-import shapeshiftSvg from 'assets/images/logo-shapeshift.svg';
-
-const ShapeshiftBanner: React.SFC<{}> = () => (
-  <div className="ShapeshiftBanner">
-    <div className="ShapeshiftBanner-banner">
-      <p>
-        <b className="ShapeshiftBanner-banner-new">New Feature:</b>
-        Exchange coins & tokens with
-      </p>
-      <img src={shapeshiftSvg} />
-    </div>
-  </div>
-);
-
-export default ShapeshiftBanner;
--- a/common/containers/Tabs/Swap/index.tsx
+++ b/common/containers/Tabs/Swap/index.tsx
@ -47,7 +47,6 @@ import PartThree from './components/PartThree';
 import SupportFooter from './components/SupportFooter';
 import ReceivingAddress from './components/ReceivingAddress';
 import SwapInfoHeader from './components/SwapInfoHeader';
-import ShapeshiftBanner from './components/ShapeshiftBanner';
 import TabSection from 'containers/TabSection';
 import { merge } from 'lodash';
 import { RouteNotFound } from 'components/RouteNotFound';
@ -219,7 +218,6 @@ class Swap extends Component<ReduxActionProps & ReduxStateProps & RouteComponent
              render={() => (
                <React.Fragment>
                  {step === 1 && <CurrentRates />}
-                  {step === 1 && <ShapeshiftBanner />}
                  {(step === 2 || step === 3) && <SwapInfoHeader {...SwapInfoHeaderProps} />}
                  <main className="Tab-content-pane">
                    {step === 1 && <CurrencySwap {...CurrencySwapProps} />}
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "MyCrypto",
  "author": "MyCryptoHQ",
-  "version": "0.5.0",
+  "version": "0.5.1",
  "main": "main.js",
  "description": "MyCrypto web and electron app",
  "repository": "https://github.com/MyCryptoHQ/MyCrypto",
@ -22,7 +22,7 @@
    "ethereumjs-util": "5.1.5",
    "ethereumjs-wallet": "0.6.0",
    "font-awesome": "4.7.0",
-    "hard-source-webpack-plugin": "0.6.4",
+    "hard-source-webpack-plugin": "0.5.16",
    "hdkey": "0.8.0",
    "idna-uts46": "1.1.0",
    "jsonschema": "1.2.2",
@ -56,7 +56,7 @@
  "devDependencies": {
    "@types/classnames": "2.2.3",
    "@types/history": "4.6.2",
-    "@types/jest": "22.1.4",
+    "@types/jest": "22.2.0",
    "@types/lodash": "4.14.104",
    "@types/qrcode": "0.8.0",
    "@types/qrcode.react": "0.6.3",