Rotate promos (#858)

* Rotate promos

* Animate promo rotation

* Update promo rotate funct

common/components/BalanceSidebar/PromoComponents/Bity.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import BityLogo from 'assets/images/logo-bity-white.svg';
+
+export const Bity: React.SFC = () => (
+  <Link className="Promos-promo Promos-Bity" target="_blank" rel="noopener noreferrer" to="/swap">
+    <div className="Promos-promo-inner">
+      <div className="Promos-promo-text">
+        <p>It’s now easier to get more ETH</p>
+        <h5>Swap BTC &lt;-&gt; ETH</h5>
+      </div>
+      <div className="Promos-promo-images">
+        <img src={BityLogo} />
+      </div>
+    </div>
+  </Link>
+);

common/components/BalanceSidebar/PromoComponents/Coinbase.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
+
+export const Coinbase: React.SFC = () => (
+  <a
+    className="Promos-promo Promos-Coinbase"
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://buy.coinbase.com?code=a6e1bd98-6464-5552-84dd-b27f0388ac7d&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD"
+  >
+    <div className="Promos-promo-inner">
+      <div className="Promos-promo-text">
+        <p key="1">It’s now easier to get more ETH</p>
+        <h5 key="2">Buy ETH with USD</h5>
+      </div>
+      <div className="Promos-promo-images">
+        <img src={CoinbaseLogo} />
+      </div>
+    </div>
+  </a>
+);

common/components/BalanceSidebar/PromoComponents/HardwareWallets.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { knowledgeBaseURL } from 'config/data';
+import ledgerLogo from 'assets/images/logo-ledger.svg';
+import trezorLogo from 'assets/images/logo-trezor.svg';
+
+export const HardwareWallets: React.SFC = () => (
+  <a
+    className="Promos-promo Promos-HardwareWallets"
+    target="_blank"
+    rel="noopener noreferrer"
+    href={`${knowledgeBaseURL}/security/securing-your-ethereum`}
+  >
+    <div className="Promos-promo-inner">
+      <div className="Promos-promo-text">
+        <h6>Learn more about protecting your funds.</h6>
+      </div>
+      <div className="Promos-promo-images">
+        <img src={ledgerLogo} />
+        <img src={trezorLogo} />
+      </div>
+    </div>
+  </a>
+);

common/components/BalanceSidebar/PromoComponents/index.ts

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

common/components/BalanceSidebar/Promos.scss

@@ -1,15 +1,34 @@
-@import "common/sass/variables";
-@import "common/sass/mixins";
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
 
 .Promos {
+  overflow: hidden;
+
+  &-promo-wrapper {
+    height: 6rem;
+    overflow: hidden;
+  }
+
+  &-Bity {
+    background-color: #006e79;
+  }
+
+  &-Coinbase {
+    background-color: #2b71b1;
+  }
+
+  &-HardwareWallets {
+    background-color: #6e9a3e;
+  }
+
   &-promo {
     position: relative;
-    height: 6rem;
+    height: inherit;
     display: block;
     color: #fff;
     text-decoration: none;
     text-align: center;
-    transition-duration: 200ms;
+    transition: opacity 200ms;
     @include clearfix;
 
     &:hover,
@@ -41,7 +60,7 @@
       h4,
       h5,
       h6 {
-        margin: .15rem 0;
+        margin: 0.15rem 0;
       }
 
       p {
@@ -88,3 +107,13 @@
     }
   }
 }
+
+.carousel-exit {
+  opacity: 1;
+  transform: translate(0%, -100%);
+  transition: opacity 300ms;
+  pointer-events: none;
+  &.carousel-exit-active {
+    opacity: 0;
+  }
+}

common/components/BalanceSidebar/Promos.tsx

@@ -1,83 +1,47 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { knowledgeBaseURL } from 'config/data';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { HardwareWallets, Coinbase, Bity } from './PromoComponents';
 import './Promos.scss';
 
-const promos = [
-  {
-    isExternal: true,
-    color: '#6e9a3e',
-    href: `${knowledgeBaseURL}/security/securing-your-ethereum`,
+const promos = [HardwareWallets, Coinbase, Bity];
 
-    texts: [<h6 key="1">Learn more about protecting your funds.</h6>],
-    images: [require('assets/images/logo-ledger.svg'), require('assets/images/logo-trezor.svg')]
-  },
-  {
-    isExternal: true,
-    color: '#2b71b1',
-    href:
-      'https://buy.coinbase.com?code=a6e1bd98-6464-5552-84dd-b27f0388ac7d&address=0xA7DeFf12461661212734dB35AdE9aE7d987D648c&crypto_currency=ETH&currency=USD',
-    texts: [<p key="1">It’s now easier to get more ETH</p>, <h5 key="2">Buy ETH with USD</h5>],
-    images: [require('assets/images/logo-coinbase.svg')]
-  },
-  {
-    isExternal: false,
-    color: '#006e79',
-    href: '/swap',
-    texts: [
-      <p key="1">It’s now easier to get more ETH</p>,
-      <h5 key="2">Swap BTC &lt;-&gt; ETH</h5>
-    ],
-    images: [require('assets/images/logo-bity-white.svg')]
-  }
-];
+const CarouselAnimation = ({ children, ...props }) => (
+  <CSSTransition {...props} timeout={300} classNames="carousel">
+    {children}
+  </CSSTransition>
+);
 
 interface State {
   activePromo: number;
 }
 
 export default class Promos extends React.Component<{}, State> {
+  public timer: any = null;
+
   public state = {
     activePromo: parseInt(String(Math.random() * promos.length), 10)
   };
 
+  public componentDidMount() {
+    this.timer = setInterval(() => this.rotate(), 10000);
+  }
+
+  public componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
   public render() {
     const { activePromo } = this.state;
-    const promo = promos[activePromo];
-
-    const promoContent = (
-      <div className="Promos-promo-inner">
-        <div className="Promos-promo-text">{promo.texts}</div>
-        <div className="Promos-promo-images">
-          {promo.images.map((img, idx) => <img src={img} key={idx} />)}
-        </div>
-      </div>
-    );
-    const promoEl = promo.isExternal ? (
-      <a
-        className="Promos-promo"
-        key={promo.href}
-        target="_blank"
-        rel="noopener noreferrer"
-        href={promo.href}
-        style={{ backgroundColor: promo.color }}
-      >
-        {promoContent}
-      </a>
-    ) : (
-      <Link
-        className="Promos-promo"
-        key={promo.href}
-        to={promo.href}
-        style={{ backgroundColor: promo.color }}
-      >
-        <div className="Promos-promo-inner">{promoContent}</div>
-      </Link>
-    );
 
     return (
       <div className="Promos">
-        {promoEl}
+        <TransitionGroup className="Promos-promo-wrapper">
+          {promos
+            .filter(i => {
+              return i === promos[activePromo];
+            })
+            .map(promo => <CarouselAnimation key={Math.random()}>{promo}</CarouselAnimation>)}
+        </TransitionGroup>
         <div className="Promos-nav">
           {promos.map((_, index) => {
             return (
@@ -94,6 +58,13 @@ export default class Promos extends React.Component<{}, State> {
   }
 
   private navigateToPromo = (idx: number) => () => {
+    // stop rotating when user begins interacting with promos
+    clearInterval(this.timer);
     this.setState({ activePromo: Math.max(0, Math.min(promos.length, idx)) });
   };
+
+  private rotate = () => {
+    const activePromo = (this.state.activePromo + 1) % promos.length;
+    this.setState({ activePromo });
+  };
 }