mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-02-04 23:33:24 +00:00
Simplex promo (#1839)
* Add simplex promo for euro * Fix when isEuroLocal() called * Add promo strings to translation files
This commit is contained in:
James Prado
Daniel Ternyak
parent
a043334685
commit
cecd7f865c
BIN
common/assets/images/logo-simplex.png
Normal file
BIN
common/assets/images/logo-simplex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import CoinbaseLogo from 'assets/images/logo-coinbase.svg';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import translate from 'translations';
|
||||
|
||||
interface Props {
|
||||
address: string;
|
||||
@ -13,8 +14,8 @@ export const Coinbase: React.SFC<Props> = ({ address }) => (
|
||||
>
|
||||
<div className="Promos-promo-inner">
|
||||
<div className="Promos-promo-text">
|
||||
<p key="1">It’s now easier to get more ETH</p>
|
||||
<h5 key="2">Buy ETH with USD</h5>
|
||||
<p key="1">{translate('COINBASE_PROMO_SMALL')}</p>
|
||||
<h5 key="2">{translate('COINBASE_PROMO')}</h5>
|
||||
</div>
|
||||
<div className="Promos-promo-images">
|
||||
<img src={CoinbaseLogo} alt="Coinbase logo" />
|
||||
|
||||
@ -3,12 +3,13 @@ import { HELP_ARTICLE } from 'config';
|
||||
import { HelpLink } from 'components/ui';
|
||||
import ledgerLogo from 'assets/images/logo-ledger.svg';
|
||||
import trezorLogo from 'assets/images/logo-trezor.svg';
|
||||
import translate from 'translations';
|
||||
|
||||
export const HardwareWallets: React.SFC = () => (
|
||||
<HelpLink className="Promos-promo Promos--hardware" article={HELP_ARTICLE.PROTECT_YOUR_FUNDS}>
|
||||
<div className="Promos-promo-inner">
|
||||
<div className="Promos-promo-text">
|
||||
<h6>Learn more about protecting your funds.</h6>
|
||||
<h6>{translate('HARDWARE_PROMO')}</h6>
|
||||
</div>
|
||||
<div className="Promos-promo-images">
|
||||
<img src={ledgerLogo} alt="Ledger Logo" />
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import ShapeshiftLogo from 'assets/images/logo-shapeshift.svg';
|
||||
import translate from 'translations';
|
||||
|
||||
export const Shapeshift: React.SFC = () => (
|
||||
<Link className="Promos-promo Promos--shapeshift" to="/swap">
|
||||
<div className="Promos-promo-inner">
|
||||
<div className="Promos-promo-text">
|
||||
<h5>
|
||||
Exchange Coins
|
||||
{translate('SHAPESHIFT_PROMO_1')}
|
||||
<br />
|
||||
& Tokens with
|
||||
{translate('SHAPESHIFT_PROMO_2')}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="Promos-promo-images">
|
||||
|
||||
17
common/components/BalanceSidebar/PromoComponents/Simplex.tsx
Normal file
17
common/components/BalanceSidebar/PromoComponents/Simplex.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import SimplexLogo from 'assets/images/logo-simplex.png';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import translate from 'translations';
|
||||
|
||||
export const Simplex: React.SFC = () => (
|
||||
<NewTabLink className="Promos-promo Promos--simplex" href={`https://buy.mycrypto.com/`}>
|
||||
<div className="Promos-promo-inner">
|
||||
<div className="Promos-promo-text">
|
||||
<h5 key="2">{translate('SIMPLEX_PROMO')}</h5>
|
||||
</div>
|
||||
<div className="Promos-promo-images">
|
||||
<img src={SimplexLogo} alt="Simplex logo" />
|
||||
</div>
|
||||
</div>
|
||||
</NewTabLink>
|
||||
);
|
||||
@ -1,3 +1,4 @@
|
||||
export * from './HardwareWallets';
|
||||
export * from './Coinbase';
|
||||
export * from './Shapeshift';
|
||||
export * from './Simplex';
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 2px;
|
||||
transition: opacity 200ms;
|
||||
@include clearfix;
|
||||
|
||||
@ -23,7 +25,7 @@
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
opacity: 0.85;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
@ -94,20 +96,29 @@
|
||||
}
|
||||
|
||||
// Per-promo customizations
|
||||
$border-size: 6px;
|
||||
&--hardware {
|
||||
background-color: #6e9a3e;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2387bb4f' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
border: $border-size solid lighten(#6e9a3e, 8%);
|
||||
}
|
||||
&--coinbase {
|
||||
background-color: #2b71b1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23498dca' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
border: $border-size solid lighten(#2b71b1, 8%);
|
||||
}
|
||||
&--shapeshift {
|
||||
background-color: #263a52;
|
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c627c' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
border: $border-size solid lighten(#263a52, 12%);
|
||||
.Promos-promo-images {
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
&--coinbase {
|
||||
background-color: #2b71b1;
|
||||
}
|
||||
|
||||
&--hardware {
|
||||
background-color: #6e9a3e;
|
||||
&--simplex {
|
||||
background-color: #2d3139;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234d535e' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
border: $border-size solid lighten(#2d3139, 12%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
||||
import { HardwareWallets, Coinbase, Shapeshift } from './PromoComponents';
|
||||
import { HardwareWallets, Coinbase, Shapeshift, Simplex } from './PromoComponents';
|
||||
import './Promos.scss';
|
||||
import { connect } from 'react-redux';
|
||||
import { AppState } from '../../reducers';
|
||||
@ -13,6 +13,16 @@ const CarouselAnimation = ({ children, ...props }: any) => (
|
||||
|
||||
// Don't change Coinbase index
|
||||
const promos = [HardwareWallets, Coinbase, Shapeshift];
|
||||
const isEuroLocal = () => {
|
||||
// getTimezoneOffset returns the difference in minutes between UTC and local time.
|
||||
// the offset is positive if behind UTC (like UTC-4), and negative if above (like UTC+2)
|
||||
const offset = new Date().getTimezoneOffset();
|
||||
// -240 to 0 covers UTC+4 to UTC+0, which is all of europe
|
||||
return -240 <= offset && offset < 0;
|
||||
};
|
||||
if (isEuroLocal()) {
|
||||
promos.push(Simplex);
|
||||
}
|
||||
|
||||
interface State {
|
||||
activePromo: number;
|
||||
@ -24,7 +34,6 @@ interface StateProps {
|
||||
|
||||
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)
|
||||
|
||||
@ -601,6 +601,12 @@
|
||||
"WELCOME_MODAL_FEATURE_MORE": "...and much, much more!",
|
||||
"WELCOME_MODAL_LINKS": "Help out with any issues you find by [reporting bugs on GitHub](https://github.com/MyCryptoHQ/MyCrypto/issues) or [HackerOne](https://hackerone.com/mycrypto). Need something from the old site, or just miss that clunky feel? We've kept it up as [MyCrypto Legacy](https://legacy.mycrypto.com).",
|
||||
"WELCOME_MODAL_CONTINUE": "Show me the new site!",
|
||||
"HARDWARE_PROMO": "Learn more about protecting your funds.",
|
||||
"SHAPESHIFT_PROMO_1": "Exchange Coins",
|
||||
"SHAPESHIFT_PROMO_2": "& Tokens",
|
||||
"COINBASE_PROMO_SMALL": "It’s now easier to get more ETH",
|
||||
"COINBASE_PROMO": "Buy ETH with USD",
|
||||
"SIMPLEX_PROMO": "Buy ETH with EUR"
|
||||
"TESTNET": "Testnet"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user