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
This commit is contained in:
Daniel Ternyak 2018-03-07 10:54:14 -06:00 committed by GitHub
parent b901c3e125
commit 3278318fa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 6 deletions

View File

@ -2,10 +2,14 @@ import React from 'react';
import CoinbaseLogo from 'assets/images/logo-coinbase.svg'; import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
import { NewTabLink } from 'components/ui'; import { NewTabLink } from 'components/ui';
export const Coinbase: React.SFC = () => ( interface Props {
address: string;
}
export const Coinbase: React.SFC<Props> = ({ address }) => (
<NewTabLink <NewTabLink
className="Promos-promo Promos--coinbase" 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-inner">
<div className="Promos-promo-text"> <div className="Promos-promo-text">

View File

@ -2,8 +2,8 @@ import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { HardwareWallets, Coinbase, Shapeshift } from './PromoComponents'; import { HardwareWallets, Coinbase, Shapeshift } from './PromoComponents';
import './Promos.scss'; import './Promos.scss';
import { connect } from 'react-redux';
const promos = [HardwareWallets, Coinbase, Shapeshift]; import { AppState } from '../../reducers';
const CarouselAnimation = ({ children, ...props }) => ( const CarouselAnimation = ({ children, ...props }) => (
<CSSTransition {...props} timeout={300} classNames="carousel"> <CSSTransition {...props} timeout={300} classNames="carousel">
@ -11,12 +11,20 @@ const CarouselAnimation = ({ children, ...props }) => (
</CSSTransition> </CSSTransition>
); );
// Don't change Coinbase index
const promos = [HardwareWallets, Coinbase, Shapeshift];
interface State { interface State {
activePromo: number; 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 timer: any = null;
public promos = [HardwareWallets, Coinbase, Shapeshift];
public state = { public state = {
activePromo: parseInt(String(Math.random() * promos.length), 10) activePromo: parseInt(String(Math.random() * promos.length), 10)
@ -30,13 +38,27 @@ export default class Promos extends React.PureComponent<{}, State> {
clearInterval(this.timer); 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() { public render() {
const { activePromo } = this.state; const { activePromo } = this.state;
return ( return (
<div className="Promos"> <div className="Promos">
<TransitionGroup className="Promos-promo-wrapper"> <TransitionGroup className="Promos-promo-wrapper">
<CarouselAnimation key={Math.random()}>{promos[activePromo]}</CarouselAnimation> <CarouselAnimation key={Math.random()}>{this.getPromo()}</CarouselAnimation>
</TransitionGroup> </TransitionGroup>
<div className="Promos-nav"> <div className="Promos-nav">
{promos.map((_, index) => { {promos.map((_, index) => {
@ -64,3 +86,11 @@ export default class Promos extends React.PureComponent<{}, State> {
this.setState({ activePromo }); this.setState({ activePromo });
}; };
} }
function mapStateToProps(state: AppState): StateProps {
return {
wallet: state.wallet.inst
};
}
export default connect(mapStateToProps, {})(PromosClass);