diff --git a/common/components/BalanceSidebar/PromoComponents/Bity.tsx b/common/components/BalanceSidebar/PromoComponents/Bity.tsx new file mode 100644 index 00000000..fad931fd --- /dev/null +++ b/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 = () => ( + +
+
+

It’s now easier to get more ETH

+
Swap BTC <-> ETH
+
+
+ +
+
+ +); diff --git a/common/components/BalanceSidebar/PromoComponents/Coinbase.tsx b/common/components/BalanceSidebar/PromoComponents/Coinbase.tsx new file mode 100644 index 00000000..1954bf84 --- /dev/null +++ b/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 = () => ( + +
+
+

It’s now easier to get more ETH

+
Buy ETH with USD
+
+
+ +
+
+ +); diff --git a/common/components/BalanceSidebar/PromoComponents/HardwareWallets.tsx b/common/components/BalanceSidebar/PromoComponents/HardwareWallets.tsx new file mode 100644 index 00000000..8c4f4918 --- /dev/null +++ b/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 = () => ( + +
+
+
Learn more about protecting your funds.
+
+
+ + +
+
+ +); diff --git a/common/components/BalanceSidebar/PromoComponents/index.ts b/common/components/BalanceSidebar/PromoComponents/index.ts new file mode 100644 index 00000000..31aec6fc --- /dev/null +++ b/common/components/BalanceSidebar/PromoComponents/index.ts @@ -0,0 +1,3 @@ +export * from './HardwareWallets'; +export * from './Coinbase'; +export * from './Bity'; diff --git a/common/components/BalanceSidebar/Promos.scss b/common/components/BalanceSidebar/Promos.scss index 8d7829fa..8ce3d216 100644 --- a/common/components/BalanceSidebar/Promos.scss +++ b/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; + } +} diff --git a/common/components/BalanceSidebar/Promos.tsx b/common/components/BalanceSidebar/Promos.tsx index 6c4ac07c..2905d300 100644 --- a/common/components/BalanceSidebar/Promos.tsx +++ b/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: [
Learn more about protecting your funds.
], - 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¤cy=USD', - texts: [

It’s now easier to get more ETH

,
Buy ETH with USD
], - images: [require('assets/images/logo-coinbase.svg')] - }, - { - isExternal: false, - color: '#006e79', - href: '/swap', - texts: [ -

It’s now easier to get more ETH

, -
Swap BTC <-> ETH
- ], - images: [require('assets/images/logo-bity-white.svg')] - } -]; +const CarouselAnimation = ({ children, ...props }) => ( + + {children} + +); 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 = ( -
-
{promo.texts}
-
- {promo.images.map((img, idx) => )} -
-
- ); - const promoEl = promo.isExternal ? ( - - {promoContent} - - ) : ( - -
{promoContent}
- - ); return (
- {promoEl} + + {promos + .filter(i => { + return i === promos[activePromo]; + }) + .map(promo => {promo})} +
{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 }); + }; }