Update Footer to Prod Styles (#1044)
This commit is contained in:
William O'Beirne
Daniel Ternyak
parent
bcdc0f546d
commit
408c0011ca
|
|
@ -1,86 +0,0 @@
|
|||
import React from 'react';
|
||||
import Modal, { IButton } from 'components/ui/Modal';
|
||||
import { HelpLink } from 'components/ui';
|
||||
import { HELP_ARTICLE } from 'config';
|
||||
|
||||
interface State {
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export default class DisclaimerModal extends React.Component<{}, State> {
|
||||
public state: State = {
|
||||
isOpen: false
|
||||
};
|
||||
|
||||
public render() {
|
||||
const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }];
|
||||
return (
|
||||
<React.Fragment>
|
||||
<button className="Footer-modal-button" onClick={this.openModal}>
|
||||
Disclaimer
|
||||
</button>
|
||||
<Modal
|
||||
isOpen={this.state.isOpen}
|
||||
title="Disclaimer"
|
||||
buttons={buttons}
|
||||
handleClose={this.closeModal}
|
||||
>
|
||||
<p>
|
||||
<b>Be safe & secure: </b>
|
||||
<HelpLink article={HELP_ARTICLE.SECURING_YOUR_ETH}>
|
||||
We highly recommend that you read our guide on How to Prevent Loss & Theft for some
|
||||
recommendations on how to be proactive about your security.
|
||||
</HelpLink>
|
||||
</p>
|
||||
<p>
|
||||
<b>Always backup your keys: </b>
|
||||
MyCrypto.com & MyCrypto CX are not "web wallets". You do not create an account or give
|
||||
us your funds to hold onto. No data leaves your computer / your browser. We make it easy
|
||||
for you to create, save, and access your information and interact with the blockchain.
|
||||
</p>
|
||||
<p>
|
||||
<b>We are not responsible for any loss: </b>
|
||||
Ethereum, MyCrypto.com & MyCrypto CX, and some of the underlying Javascript libraries we
|
||||
use are under active development. While we have thoroughly tested & tens of thousands of
|
||||
wallets have been successfully created by people all over the globe, there is always the
|
||||
possibility something unexpected happens that causes your funds to be lost. Please do
|
||||
not invest more than you are willing to lose, and please be careful.
|
||||
</p>
|
||||
<p>
|
||||
<b>Translations of MyCrypto: </b>
|
||||
The community has done an amazing job translating MyCrypto into a variety of languages.
|
||||
However, MyCrypto can only verify the validity and accuracy of the information provided
|
||||
in English and, because of this, the English version of our website is the official
|
||||
text.
|
||||
</p>
|
||||
<p>
|
||||
<b>MIT License</b> Copyright © 2015-2017 MyCrypto LLC
|
||||
</p>
|
||||
<p>
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this
|
||||
software and associated documentation files (the "Software"), to deal in the Software
|
||||
without restriction, including without limitation the rights to use, copy, modify,
|
||||
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
</p>
|
||||
<p>
|
||||
The above copyright notice and this permission notice shall be included in all copies or
|
||||
substantial portions of the Software.
|
||||
</p>
|
||||
<b>
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
|
||||
OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
</b>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
private openModal = () => this.setState({ isOpen: true });
|
||||
private closeModal = () => this.setState({ isOpen: false });
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import 'common/sass/variables';
|
||||
@import 'common/sass/mixins';
|
||||
|
||||
.Disclaimer {
|
||||
color: $text-color;
|
||||
|
||||
&-button {
|
||||
@include reset-button;
|
||||
color: #FFF;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
import Modal, { IButton } from 'components/ui/Modal';
|
||||
import { HelpLink } from 'components/ui';
|
||||
import { HELP_ARTICLE } from 'config';
|
||||
import './DisclaimerModal.scss';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
handleClose(): void;
|
||||
}
|
||||
|
||||
const DisclaimerModal: React.SFC<Props> = ({ isOpen, handleClose }) => {
|
||||
const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: handleClose }];
|
||||
return (
|
||||
<Modal isOpen={isOpen} title="Disclaimer" buttons={buttons} handleClose={handleClose}>
|
||||
<p>
|
||||
<b>Be safe & secure: </b>
|
||||
<HelpLink article={HELP_ARTICLE.SECURING_YOUR_ETH}>
|
||||
We highly recommend that you read our guide on How to Prevent Loss & Theft for some
|
||||
recommendations on how to be proactive about your security.
|
||||
</HelpLink>
|
||||
</p>
|
||||
<p>
|
||||
<b>Always backup your keys: </b>
|
||||
MyCrypto.com & MyCrypto CX are not "web wallets". You do not create an account or give us
|
||||
your funds to hold onto. No data leaves your computer / your browser. We make it easy for
|
||||
you to create, save, and access your information and interact with the blockchain.
|
||||
</p>
|
||||
<p>
|
||||
<b>We are not responsible for any loss: </b>
|
||||
Ethereum, MyCrypto.com & MyCrypto CX, and some of the underlying Javascript libraries we use
|
||||
are under active development. While we have thoroughly tested & tens of thousands of wallets
|
||||
have been successfully created by people all over the globe, there is always the possibility
|
||||
something unexpected happens that causes your funds to be lost. Please do not invest more
|
||||
than you are willing to lose, and please be careful.
|
||||
</p>
|
||||
<p>
|
||||
<b>Translations of MyCrypto: </b>
|
||||
The community has done an amazing job translating MyCrypto into a variety of languages.
|
||||
However, MyCrypto can only verify the validity and accuracy of the information provided in
|
||||
English and, because of this, the English version of our website is the official text.
|
||||
</p>
|
||||
<p>
|
||||
<b>MIT License</b> Copyright © 2015-2017 MyCrypto LLC
|
||||
</p>
|
||||
<p>
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this
|
||||
software and associated documentation files (the "Software"), to deal in the Software
|
||||
without restriction, including without limitation the rights to use, copy, modify, merge,
|
||||
publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
|
||||
to whom the Software is furnished to do so, subject to the following conditions:
|
||||
</p>
|
||||
<p>
|
||||
The above copyright notice and this permission notice shall be included in all copies or
|
||||
substantial portions of the Software.
|
||||
</p>
|
||||
<b>
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
|
||||
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||||
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
DEALINGS IN THE SOFTWARE.
|
||||
</b>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisclaimerModal;
|
||||
|
|
@ -1,15 +1,18 @@
|
|||
import React from 'react';
|
||||
import './PreFooter.scss';
|
||||
|
||||
const PreFooter: React.SFC<{}> = () => {
|
||||
interface Props {
|
||||
openModal(): void;
|
||||
}
|
||||
|
||||
const PreFooter: React.SFC<Props> = ({ openModal }) => {
|
||||
return (
|
||||
<section className="pre-footer">
|
||||
<div className="container">
|
||||
<p>
|
||||
MyCrypto.com does not hold your keys for you. We cannot access accounts, recover keys,
|
||||
reset passwords, nor reverse transactions. Protect your keys & always check that you
|
||||
are on correct URL.
|
||||
<a href="#"> You are responsible for your security.</a>
|
||||
reset passwords, nor reverse transactions. Protect your keys & always check that you are
|
||||
on correct URL. <a onClick={openModal}>You are responsible for your security.</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,158 +1,172 @@
|
|||
@import 'common/sass/variables';
|
||||
@import 'common/sass/mixins';
|
||||
|
||||
$footer-link-color: #fff;
|
||||
|
||||
// footer
|
||||
.Footer {
|
||||
background-color: $ether-navy;
|
||||
color: white;
|
||||
padding-top: $space-xs;
|
||||
padding-bottom: $space-sm;
|
||||
padding: $space-sm $space-sm 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-top: 3px solid $brand-primary;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
flex-direction: row;
|
||||
&-section {
|
||||
color: #fff;
|
||||
padding: $space;
|
||||
}
|
||||
|
||||
// Responsive ordering behavior
|
||||
&-links {
|
||||
order: 1;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
&-about {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
}
|
||||
&-support {
|
||||
order: 3;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 8px 16px;
|
||||
@media (max-width: 75rem) {
|
||||
justify-content: center;
|
||||
|
||||
&-links {
|
||||
text-align: center;
|
||||
order: 2;
|
||||
}
|
||||
&-about {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
padding-bottom: $space * 2;
|
||||
margin-bottom: $space * 2;
|
||||
border-bottom: 1px solid rgba(#fff, 0.2);
|
||||
}
|
||||
&-support {
|
||||
text-align: center;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&-social-media-wrap {
|
||||
margin-top: $space;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-top: $space-md;
|
||||
&-links {
|
||||
&-social {
|
||||
margin-bottom: $space;
|
||||
margin-left: -$space-xs;
|
||||
}
|
||||
|
||||
& .Footer-social-media-link {
|
||||
transition: opacity 0.3s;
|
||||
color: white;
|
||||
margin: 1rem;
|
||||
margin-left: 0;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
color: white;
|
||||
&-links {
|
||||
a {
|
||||
display: block;
|
||||
font-size: $font-size-small;
|
||||
color: $footer-link-color;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Don't use &, needs to override styles
|
||||
.Footer-affiliate-tag {
|
||||
background-color: #0e97c0;
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 30px;
|
||||
margin: 0rem 0.5rem 0.5rem 0px;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: #0e97c0;
|
||||
}
|
||||
& a {
|
||||
transition: color 0s;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-column {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
&-about {
|
||||
&-logo {
|
||||
width: 100%;
|
||||
padding: 0 10px 0 0;
|
||||
padding-top: 0;
|
||||
height: auto;
|
||||
max-width: 12rem;
|
||||
}
|
||||
&-text {
|
||||
max-width: 50ch;
|
||||
}
|
||||
}
|
||||
|
||||
&-about,
|
||||
&-links,
|
||||
&-info {
|
||||
& > a {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 245px;
|
||||
margin: -$space-xs auto $space * 1.25;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-links {
|
||||
margin-bottom: $space;
|
||||
|
||||
> a {
|
||||
margin: 0 $space-md;
|
||||
color: $footer-link-color;
|
||||
font-size: $font-size-bump;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: $font-size-xs;
|
||||
opacity: 0.8;
|
||||
margin: 0 auto $space;
|
||||
max-width: 530px;
|
||||
}
|
||||
|
||||
&-legal {
|
||||
font-size: $font-size-xs-bump;
|
||||
|
||||
&-text {
|
||||
display: inline-block;
|
||||
margin: 0 $space-sm;
|
||||
|
||||
> a {
|
||||
color: $footer-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-modal-button {
|
||||
color: #4ac8ed;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
transition: 500ms all ease-in-out;
|
||||
&:hover {
|
||||
color: #0e97c0;
|
||||
|
||||
&-support {
|
||||
&-title {
|
||||
margin: 0 0 $space-sm;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-copyright {
|
||||
&-spacer {
|
||||
margin: 0 $space-xs;
|
||||
&-affiliates {
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
font-size: $font-size-xs-bump;
|
||||
margin-bottom: $space-xs;
|
||||
color: $footer-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $space-xs 0 $space-sm;
|
||||
}
|
||||
&-donate {
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
a,
|
||||
.Footer-modal-button {
|
||||
color: #7fe5ff;
|
||||
font-weight: 400;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
color: darken(#4ac8ed, 5%);
|
||||
&-address {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-size-bump;
|
||||
margin: $space-md 0;
|
||||
&-friends {
|
||||
> a {
|
||||
display: inline-block;
|
||||
font-size: $font-size-xs;
|
||||
color: $footer-link-color;
|
||||
|
||||
i {
|
||||
margin-right: 0.25em;
|
||||
&:after {
|
||||
content: '·';
|
||||
margin: 0 $space-sm;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0 0 $space-md 0;
|
||||
}
|
||||
|
||||
> li,
|
||||
> p {
|
||||
font-size: 0.8rem;
|
||||
margin: $space-sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Modal {
|
||||
color: #000;
|
||||
.SocialMediaLink {
|
||||
transition: opacity 0.3s;
|
||||
color: #fff;
|
||||
margin: 0.65rem;
|
||||
|
||||
> i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,94 +2,105 @@ import logo from 'assets/images/logo-mycrypto.svg';
|
|||
import {
|
||||
ledgerReferralURL,
|
||||
trezorReferralURL,
|
||||
bitboxReferralURL,
|
||||
ethercardReferralURL,
|
||||
donationAddressMap,
|
||||
VERSION,
|
||||
knowledgeBaseURL
|
||||
} from 'config';
|
||||
import React from 'react';
|
||||
import translate from 'translations';
|
||||
import './index.scss';
|
||||
import PreFooter from './PreFooter';
|
||||
import Disclaimer from './Disclaimer';
|
||||
import DisclaimerModal from './DisclaimerModal';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import OnboardModal from 'containers/OnboardModal';
|
||||
|
||||
const AffiliateTag = ({ link, text }: Link) => {
|
||||
return (
|
||||
<li className="Footer-affiliate-tag" key={link}>
|
||||
<NewTabLink href={link}>{text}</NewTabLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
import './index.scss';
|
||||
|
||||
const SocialMediaLink = ({ link, text }: Link) => {
|
||||
return (
|
||||
<NewTabLink className="Footer-social-media-link" key={link} href={link}>
|
||||
<i className={`sm-icon sm-logo-${text} sm-24px`} />
|
||||
<NewTabLink className="SocialMediaLink" key={link} href={link} aria-label={text}>
|
||||
<i className={`sm-icon sm-logo-${text}`} />
|
||||
</NewTabLink>
|
||||
);
|
||||
};
|
||||
|
||||
const SOCIAL_MEDIA: Link[] = [
|
||||
{
|
||||
link: 'https://www.reddit.com/r/mycrypto/',
|
||||
text: 'reddit'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://twitter.com/mycrypto',
|
||||
text: 'twitter'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://www.facebook.com/MyCrypto/',
|
||||
text: 'facebook'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://medium.com/@mycrypto',
|
||||
text: 'medium'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://www.linkedin.com/company/mycrypto',
|
||||
text: 'linkedin'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://github.com/MyCryptoHQ',
|
||||
text: 'github'
|
||||
},
|
||||
{
|
||||
link: 'https://www.reddit.com/r/mycrypto/',
|
||||
text: 'reddit'
|
||||
}
|
||||
];
|
||||
|
||||
const PRODUCT_INFO: Link[] = [
|
||||
{
|
||||
link: knowledgeBaseURL,
|
||||
text: 'Knowledge Base'
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
|
||||
text: 'Ether Address Lookup'
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/ethersecuritylookup/bhhfhgpgmifehjdghlbbijjaimhmcgnf',
|
||||
text: 'Ether Security Lookup'
|
||||
},
|
||||
{
|
||||
link: 'https://etherscamdb.info/',
|
||||
text: 'EtherScamDB'
|
||||
},
|
||||
{
|
||||
link: 'https://www.mycrypto.com/helpers.html',
|
||||
text: 'Helpers & ENS Debugging'
|
||||
},
|
||||
{
|
||||
link: 'mailto:press@mycrypto.com',
|
||||
text: 'Press Inquiries'
|
||||
}
|
||||
];
|
||||
|
||||
const AFFILIATES: Link[] = [
|
||||
{
|
||||
link: 'https://github.com/MyCryptoHQ/MyCrypto',
|
||||
text: 'Github: Current Site'
|
||||
link: ledgerReferralURL,
|
||||
text: 'Buy a Ledger Wallet'
|
||||
},
|
||||
{
|
||||
link: 'https://github.com/MyCryptoHQ',
|
||||
text: 'Github: MyCrypto Org'
|
||||
link: trezorReferralURL,
|
||||
text: 'Buy a TREZOR'
|
||||
},
|
||||
{
|
||||
link: 'https://github.com/MyCryptoHQ/MyCrypto/releases/latest',
|
||||
text: 'Github: Latest Release'
|
||||
},
|
||||
link: ethercardReferralURL,
|
||||
text: 'Get an ether.card'
|
||||
}
|
||||
];
|
||||
|
||||
const FRIENDS: Link[] = [
|
||||
{
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
|
||||
text: 'Anti - Phishing Extension'
|
||||
link: 'https://metamask.io/',
|
||||
text: 'MetaMask'
|
||||
},
|
||||
{
|
||||
link: 'https://infura.io/',
|
||||
text: 'Infura'
|
||||
},
|
||||
{
|
||||
link: 'https://etherscan.io/',
|
||||
text: 'Etherscan'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -102,66 +113,22 @@ interface Props {
|
|||
latestBlock: string;
|
||||
}
|
||||
|
||||
export default class Footer extends React.PureComponent<Props> {
|
||||
interface State {
|
||||
isDisclaimerOpen: boolean;
|
||||
}
|
||||
|
||||
export default class Footer extends React.PureComponent<Props, State> {
|
||||
public state: State = {
|
||||
isDisclaimerOpen: false
|
||||
};
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
<OnboardModal />
|
||||
<PreFooter />
|
||||
<PreFooter openModal={this.toggleModal} />
|
||||
<footer className="Footer" role="contentinfo" aria-label="footer">
|
||||
<div className="Footer-about">
|
||||
<p aria-hidden="true">
|
||||
<NewTabLink href="/">
|
||||
<img
|
||||
className="Footer-about-logo"
|
||||
src={logo}
|
||||
height="55px"
|
||||
width="auto"
|
||||
alt="MyCrypto logo"
|
||||
/>
|
||||
</NewTabLink>
|
||||
</p>
|
||||
<p className="Footer-about-text">{translate('FOOTER_1')}</p>
|
||||
|
||||
<p className="Footer-copyright">
|
||||
© {new Date().getFullYear()} MyCrypto, LLC{' '}
|
||||
<span className="Footer-copyright-spacer">·</span> {VERSION}
|
||||
</p>
|
||||
|
||||
<Disclaimer />
|
||||
</div>
|
||||
|
||||
<div className="Footer-info">
|
||||
<h5>You can support us by buying a...</h5>
|
||||
<ul>
|
||||
<AffiliateTag link={ledgerReferralURL} text="Ledger Nano S" />
|
||||
<AffiliateTag link={trezorReferralURL} text="TREZOR" />
|
||||
<AffiliateTag link={bitboxReferralURL} text="Digital Bitbox" />
|
||||
</ul>
|
||||
|
||||
<h5>
|
||||
<i aria-hidden="true">💝</i>
|
||||
{translate('FOOTER_2')}
|
||||
</h5>
|
||||
<ul>
|
||||
<li>
|
||||
ETH: <span className="mono wrap">{donationAddressMap.ETH}</span>
|
||||
</li>
|
||||
<li>
|
||||
{' '}
|
||||
BTC: <span className="mono wrap">{donationAddressMap.BTC}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="Footer-links">
|
||||
{PRODUCT_INFO.map((productInfoItem, idx) => (
|
||||
<NewTabLink target="_blank" key={idx} href={productInfoItem.link}>
|
||||
{productInfoItem.text}
|
||||
</NewTabLink>
|
||||
))}
|
||||
|
||||
<div className="Footer-social-media-wrap">
|
||||
<div className="Footer-links Footer-section">
|
||||
<div className="Footer-links-social">
|
||||
{SOCIAL_MEDIA.map((socialMediaItem, idx) => (
|
||||
<SocialMediaLink
|
||||
link={socialMediaItem.link}
|
||||
|
|
@ -170,9 +137,90 @@ export default class Footer extends React.PureComponent<Props> {
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="Footer-links-links">
|
||||
{PRODUCT_INFO.map((productInfoItem, idx) => (
|
||||
<NewTabLink key={idx} href={productInfoItem.link}>
|
||||
{productInfoItem.text}
|
||||
</NewTabLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<a href="https://mycrypto.com">MyCrypto.com</a>
|
||||
<NewTabLink href={knowledgeBaseURL}>Help & Support</NewTabLink>
|
||||
<NewTabLink href="https://about.mycrypto.com">Our Team</NewTabLink>
|
||||
</div>
|
||||
|
||||
<p className="Footer-about-text">
|
||||
MyCrypto is an open-source, client-side tool for generating Ether Wallets, handling
|
||||
ERC-20 tokens, and interacting with the blockchain more easily. Developed by and for
|
||||
the community since 2015, we’re focused on building awesome products that put the
|
||||
power in people’s hands.
|
||||
</p>
|
||||
|
||||
<div className="Footer-about-legal">
|
||||
<div className="Footer-about-legal-text">
|
||||
© {new Date().getFullYear()} MyCrypto, Inc.
|
||||
</div>
|
||||
<div className="Footer-about-legal-text">
|
||||
<a onClick={this.toggleModal}>Disclaimer</a>
|
||||
</div>
|
||||
<div className="Footer-about-legal-text">v{VERSION}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="Footer-support Footer-section">
|
||||
<h5 className="Footer-support-title">Support Us & Our Friends</h5>
|
||||
<div className="Footer-support-affiliates">
|
||||
{AFFILIATES.map(link => (
|
||||
<NewTabLink key={link.text} href={link.link}>
|
||||
{link.text}
|
||||
</NewTabLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="Footer-support-donate">
|
||||
<div className="Footer-support-donate-currency">Donate ETH</div>
|
||||
<div className="Footer-support-donate-address">{donationAddressMap.ETH}</div>
|
||||
</div>
|
||||
|
||||
<div className="Footer-support-donate">
|
||||
<div className="Footer-support-donate-currency">Donate BTC</div>
|
||||
<div className="Footer-support-donate-address">{donationAddressMap.BTC}</div>
|
||||
</div>
|
||||
|
||||
<div className="Footer-support-friends">
|
||||
{FRIENDS.map(link => (
|
||||
<NewTabLink key={link.text} href={link.link}>
|
||||
{link.text}
|
||||
</NewTabLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<OnboardModal />
|
||||
<DisclaimerModal isOpen={this.state.isDisclaimerOpen} handleClose={this.toggleModal} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private toggleModal = () => {
|
||||
this.setState(state => {
|
||||
this.setState({ isDisclaimerOpen: !state.isDisclaimerOpen });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { getValues } from '../utils/helpers';
|
|||
|
||||
export const languages = require('./languages.json');
|
||||
|
||||
// Displays in the header
|
||||
export const VERSION = '(BETA) 0.1.0';
|
||||
// Displays in the footer
|
||||
export const VERSION = '0.1.0 (BETA)';
|
||||
export const N_FACTOR = 8192;
|
||||
|
||||
// Displays at the top of the site, make message empty string to remove.
|
||||
|
|
@ -56,6 +56,8 @@ export const bitboxReferralURL = 'https://digitalbitbox.com/?ref=mycrypto';
|
|||
export const bityReferralURL = 'https://bity.com/af/jshkb37v';
|
||||
// TODO - add the real referral url once you know it
|
||||
export const shapeshiftReferralURL = 'https://shapeshift.io';
|
||||
export const ethercardReferralURL =
|
||||
'https://ether.cards/?utm_source=mycrypto&utm_medium=cpm&utm_campaign=site';
|
||||
|
||||
export enum SecureWalletName {
|
||||
WEB3 = 'web3',
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ $font-size-bump-more: 1.15rem; // 17.25
|
|||
$font-size-bump: 1.07rem; // 16.05
|
||||
$font-size-base: 1rem; // 15
|
||||
$font-size-small: 0.9rem; // 13.8
|
||||
$font-size-xs-bump: 0.8rem; // 12.8
|
||||
$font-size-xs: 0.75rem; // 12
|
||||
|
||||
$font-size-h1: $font-size-large-bump;
|
||||
|
|
|
|||
Loading…
Reference in New Issue