2018-06-18 01:53:00 +00:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { translateRaw } from 'translations';
|
2018-02-07 04:28:28 +00:00
|
|
|
import logo from 'assets/images/logo-mycrypto.svg';
|
2017-11-28 05:43:30 +00:00
|
|
|
import {
|
2017-12-05 19:51:21 +00:00
|
|
|
donationAddressMap,
|
2017-12-06 23:04:57 +00:00
|
|
|
VERSION,
|
2018-02-27 21:35:32 +00:00
|
|
|
knowledgeBaseURL,
|
2018-04-16 23:30:58 +00:00
|
|
|
socialMediaLinks,
|
|
|
|
productLinks,
|
|
|
|
affiliateLinks,
|
|
|
|
partnerLinks
|
2018-01-20 20:06:28 +00:00
|
|
|
} from 'config';
|
2018-04-16 23:30:58 +00:00
|
|
|
import DisclaimerModal from 'components/DisclaimerModal';
|
2017-11-28 05:43:30 +00:00
|
|
|
import { NewTabLink } from 'components/ui';
|
2018-06-18 01:53:00 +00:00
|
|
|
import PreFooter from './PreFooter';
|
2018-06-27 04:51:42 +00:00
|
|
|
import ThemeToggle from './ThemeToggle';
|
2018-02-10 18:56:05 +00:00
|
|
|
import './index.scss';
|
2017-11-28 05:43:30 +00:00
|
|
|
|
2018-04-16 23:30:58 +00:00
|
|
|
const SocialMediaLink = ({ link, text }: { link: string; text: string }) => {
|
2017-11-28 05:43:30 +00:00
|
|
|
return (
|
2018-02-10 18:56:05 +00:00
|
|
|
<NewTabLink className="SocialMediaLink" key={link} href={link} aria-label={text}>
|
|
|
|
<i className={`sm-icon sm-logo-${text}`} />
|
2017-11-28 05:43:30 +00:00
|
|
|
</NewTabLink>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2017-11-18 20:33:53 +00:00
|
|
|
interface Props {
|
|
|
|
latestBlock: string;
|
2017-11-28 05:43:30 +00:00
|
|
|
}
|
2017-11-18 20:33:53 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
interface State {
|
|
|
|
isDisclaimerOpen: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class Footer extends React.PureComponent<Props, State> {
|
|
|
|
public state: State = {
|
|
|
|
isDisclaimerOpen: false
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public render() {
|
2017-06-24 01:27:17 +00:00
|
|
|
return (
|
2017-09-15 21:38:11 +00:00
|
|
|
<div>
|
2018-02-10 18:56:05 +00:00
|
|
|
<PreFooter openModal={this.toggleModal} />
|
2017-09-15 21:38:11 +00:00
|
|
|
<footer className="Footer" role="contentinfo" aria-label="footer">
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-links Footer-section">
|
|
|
|
<div className="Footer-links-social">
|
2018-04-16 23:30:58 +00:00
|
|
|
{socialMediaLinks.map((socialMediaItem, idx) => (
|
2018-02-10 18:56:05 +00:00
|
|
|
<SocialMediaLink
|
|
|
|
link={socialMediaItem.link}
|
|
|
|
key={idx}
|
|
|
|
text={socialMediaItem.text}
|
2017-09-15 21:38:11 +00:00
|
|
|
/>
|
2018-02-10 18:56:05 +00:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="Footer-links-links">
|
2018-04-16 23:30:58 +00:00
|
|
|
{productLinks.map(link => (
|
|
|
|
<NewTabLink key={link.link} href={link.link}>
|
|
|
|
{link.text}
|
2018-02-10 18:56:05 +00:00
|
|
|
</NewTabLink>
|
|
|
|
))}
|
2018-04-16 23:30:58 +00:00
|
|
|
<NewTabLink href="mailto:press@mycrypto.com">
|
|
|
|
{translateRaw('FOOTER_PRESS')}
|
|
|
|
</NewTabLink>
|
2018-02-10 18:56:05 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-02-07 23:22:31 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-about Footer-section">
|
|
|
|
<NewTabLink className="Footer-about-logo" href="/">
|
|
|
|
<img
|
|
|
|
className="Footer-about-logo-img"
|
|
|
|
src={logo}
|
|
|
|
height="55px"
|
|
|
|
width="auto"
|
|
|
|
alt="MyCrypto logo"
|
|
|
|
/>
|
|
|
|
</NewTabLink>
|
|
|
|
|
|
|
|
<div className="Footer-about-links">
|
2018-04-13 04:36:51 +00:00
|
|
|
<NewTabLink href="https://mycrypto.com">MyCrypto.com</NewTabLink>
|
2018-03-22 03:50:25 +00:00
|
|
|
<NewTabLink href={knowledgeBaseURL}>{translateRaw('FOOTER_SUPPORT')}</NewTabLink>
|
|
|
|
<NewTabLink href="https://about.mycrypto.com">
|
|
|
|
{translateRaw('FOOTER_TEAM')}
|
|
|
|
</NewTabLink>
|
2018-05-13 19:09:19 +00:00
|
|
|
<NewTabLink href="https://about.mycrypto.com/privacy/">
|
2018-05-11 04:35:10 +00:00
|
|
|
{translateRaw('FOOTER_PRIVACY_POLICY')}
|
|
|
|
</NewTabLink>
|
2018-02-10 18:56:05 +00:00
|
|
|
</div>
|
|
|
|
|
2018-03-22 03:50:25 +00:00
|
|
|
<p className="Footer-about-text">{translateRaw('FOOTER_ABOUT')}</p>
|
2018-02-07 23:22:31 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-about-legal">
|
|
|
|
<div className="Footer-about-legal-text">
|
|
|
|
© {new Date().getFullYear()} MyCrypto, Inc.
|
|
|
|
</div>
|
|
|
|
<div className="Footer-about-legal-text">
|
2018-03-22 03:50:25 +00:00
|
|
|
<a onClick={this.toggleModal}>{translateRaw('DISCLAIMER')}</a>
|
2018-02-10 18:56:05 +00:00
|
|
|
</div>
|
|
|
|
<div className="Footer-about-legal-text">v{VERSION}</div>
|
|
|
|
</div>
|
2018-06-27 04:51:42 +00:00
|
|
|
|
|
|
|
<div className="Footer-about-theme">
|
|
|
|
<ThemeToggle />
|
|
|
|
</div>
|
2017-09-15 21:38:11 +00:00
|
|
|
</div>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support Footer-section">
|
2018-03-22 03:50:25 +00:00
|
|
|
<h5 className="Footer-support-title">{translateRaw('FOOTER_AFFILIATE_TITLE')}</h5>
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support-affiliates">
|
2018-04-16 23:30:58 +00:00
|
|
|
{affiliateLinks.map((link, i) => (
|
2018-03-22 03:50:25 +00:00
|
|
|
<NewTabLink key={i} href={link.link}>
|
2018-02-10 18:56:05 +00:00
|
|
|
{link.text}
|
|
|
|
</NewTabLink>
|
|
|
|
))}
|
|
|
|
</div>
|
2017-09-15 21:38:11 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support-donate">
|
2018-03-22 03:50:25 +00:00
|
|
|
<div className="Footer-support-donate-currency">
|
|
|
|
{translateRaw('DONATE_CURRENCY', { $currency: 'ETH' })}
|
|
|
|
</div>
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support-donate-address">{donationAddressMap.ETH}</div>
|
|
|
|
</div>
|
2017-11-28 05:43:30 +00:00
|
|
|
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support-donate">
|
2018-03-22 03:50:25 +00:00
|
|
|
<div className="Footer-support-donate-currency">
|
|
|
|
{translateRaw('DONATE_CURRENCY', { $currency: 'BTC' })}
|
|
|
|
</div>
|
2018-02-10 18:56:05 +00:00
|
|
|
<div className="Footer-support-donate-address">{donationAddressMap.BTC}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="Footer-support-friends">
|
2018-04-16 23:30:58 +00:00
|
|
|
{partnerLinks.map((link, i) => (
|
2018-03-22 03:50:25 +00:00
|
|
|
<NewTabLink key={i} href={link.link}>
|
2018-02-10 18:56:05 +00:00
|
|
|
{link.text}
|
|
|
|
</NewTabLink>
|
2017-11-28 05:43:30 +00:00
|
|
|
))}
|
|
|
|
</div>
|
2017-09-15 21:38:11 +00:00
|
|
|
</div>
|
|
|
|
</footer>
|
2018-02-10 18:56:05 +00:00
|
|
|
<DisclaimerModal isOpen={this.state.isDisclaimerOpen} handleClose={this.toggleModal} />
|
2017-09-15 21:38:11 +00:00
|
|
|
</div>
|
2017-06-24 01:27:17 +00:00
|
|
|
);
|
|
|
|
}
|
2018-02-10 18:56:05 +00:00
|
|
|
|
|
|
|
private toggleModal = () => {
|
|
|
|
this.setState(state => {
|
|
|
|
this.setState({ isDisclaimerOpen: !state.isDisclaimerOpen });
|
|
|
|
});
|
|
|
|
};
|
2017-04-12 05:04:27 +00:00
|
|
|
}
|