107 lines
2.7 KiB
TypeScript
107 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import './Promos.scss';
|
||
|
||
const promos = [
|
||
{
|
||
isExternal: true,
|
||
color: '#6e9a3e',
|
||
href:
|
||
'https://myetherwallet.groovehq.com/knowledge_base/topics/protecting-yourself-and-your-funds',
|
||
|
||
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¤cy=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 <-> ETH</h5>
|
||
],
|
||
images: [require('assets/images/logo-bity-white.svg')]
|
||
}
|
||
];
|
||
|
||
interface State {
|
||
activePromo: number;
|
||
}
|
||
|
||
export default class Promos extends React.Component<{}, State> {
|
||
public state = {
|
||
activePromo: parseInt(String(Math.random() * promos.length), 10)
|
||
};
|
||
|
||
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"
|
||
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}
|
||
<div className="Promos-nav">
|
||
{promos.map((_, index) => {
|
||
return (
|
||
<button
|
||
className={`Promos-nav-btn ${index === activePromo
|
||
? 'is-active'
|
||
: ''}`}
|
||
key={index}
|
||
onClick={this.navigateToPromo(index)}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
private navigateToPromo = (idx: number) => () => {
|
||
this.setState({ activePromo: Math.max(0, Math.min(promos.length, idx)) });
|
||
};
|
||
}
|