Fix Coinbase Widget (#1286)

* Connect Promos; pass current wallet address to Coinbase

* Use ShapeShift as promo if no wallet instance when showing Coinbase

* use appstate for typing

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">

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);