mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-09 10:41:56 +00:00
26619e28cc
* working version of test custom rule config * setting no imports to false so tests will pass * adding anchor blank noopener rule, rule currently off to allow tests to pass * removing copied code from tslint-microsoft-contrib * adding tslint-microsoft-contrib to dev deps * extending tslint for external http rule * locking tslint-microsoft-contrib version and turning on target blank noopener rule * final fixes for pull #663 * add noopener noreferrer as needed * fixing false positives for a tags without href * really fix linting errors * fix imports * remove accidently(?) added LedgerNano duplicate file
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { knowledgeBaseURL } from 'config/data';
|
||
import './Promos.scss';
|
||
|
||
const promos = [
|
||
{
|
||
isExternal: true,
|
||
color: '#6e9a3e',
|
||
href: `${knowledgeBaseURL}/security/securing-your-ethereum`,
|
||
|
||
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"
|
||
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}
|
||
<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)) });
|
||
};
|
||
}
|