MyCrypto/common/components/Footer/index.tsx

238 lines
6.3 KiB
TypeScript
Raw Normal View History

import logo from 'assets/images/logo-mycrypto.svg';
import {
ledgerReferralURL,
trezorReferralURL,
2018-02-10 18:56:05 +00:00
ethercardReferralURL,
donationAddressMap,
2017-12-06 23:04:57 +00:00
VERSION,
knowledgeBaseURL,
discordURL
2018-01-20 20:06:28 +00:00
} from 'config';
import React from 'react';
Migrate to Typescript (#224) * Refactor babel/types * Refactor entry point * Refactor actions * Refactor api * Full project refactor -- Broad type fixing sweep * - completely fix merge conflicts - handle various type errors * Add tslint to package.json * Dependency cleanup * Fix module resolution * Work on type definitions for untyped libs * progress commit * Add more definition typing * various type additions * Add unit types * Fix sagaiterator + unit types * various types added * additional type additions * Fix typing on Sagas * remove flowfixmes; swap translate for translateRaw * Get rid of contracts - awaiting Henry's contract PR * Remove contracts from routing * Fix most of actions/reducers * refactor actions directory structure * fix reducer action type imports * Fix most of type errors pre-actions refactor * fix action creator imports in containers * Refactor more * Refactor index of actions * fix action imports; use module level index export * package-lock.json updated * Use action types in props * Type up action creators * Fix most of connect errors * Typefixing progress * More types * Fix run-time errors * Caching improvements for webpack * Remove path resolve from webpack * Update non-breaking packages to latest version * Fix token typing * Remove unused color code * Fix wallet decrypt dispatch * Set redux-form related props/functions to ANY, since we're stripping it out later on * Revert BigNumber.js package changes * Extend window to custom object for Perf * Format Navigation * Typecase keystore errors as any (since we shouldnt touch this) * Push wallet context fix * - find/replace value->payload in swap - properly type swap state properties - extract inline reducer into reducer function * - type local storage retrieved items as generic * - bind all RPCClient methods with fat arrow * - reformat * Change to enums for constants * Change state into any * Fix swap errors * ensure that seconds are passed into state as integers * Fix rest of errors * use parseInt explicitly instead of type coercion * Fix derivation-checker, remove flow command, add tslint command, add tslint-react, tell travis to use tslint instead of flow. * Whoops, remove those tests. * Remove unsupported (yet) config option. * Fix precommit to target ts and tsx files. * Fix some errors, ignore some silly rules. * Revert jest to v19, use ts-jest and make all tests typescript. Fixes all but one. * Get rid of saga tests * Fix tslint errors
2017-09-25 02:06:28 +00:00
import PreFooter from './PreFooter';
2018-02-10 18:56:05 +00:00
import DisclaimerModal from './DisclaimerModal';
import { NewTabLink } from 'components/ui';
import OnboardModal from 'containers/OnboardModal';
2018-02-10 18:56:05 +00:00
import './index.scss';
import { translateRaw } from 'translations';
const SocialMediaLink = ({ link, text }: Link) => {
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}`} />
</NewTabLink>
);
};
const SOCIAL_MEDIA: Link[] = [
{
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'
2018-02-10 18:56:05 +00:00
},
{
link: 'https://www.reddit.com/r/mycrypto/',
text: 'reddit'
},
{
link: discordURL,
text: 'discord'
}
];
const PRODUCT_INFO: Link[] = [
{
2018-02-10 18:56:05 +00:00
link:
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
text: translateRaw('ETHER_ADDRESS_LOOKUP')
2018-02-10 18:56:05 +00:00
},
{
link:
'https://chrome.google.com/webstore/detail/ethersecuritylookup/bhhfhgpgmifehjdghlbbijjaimhmcgnf',
text: translateRaw('ETHER_SECURITY_LOOKUP')
2018-02-10 18:56:05 +00:00
},
{
link: 'https://etherscamdb.info/',
text: translateRaw('ETHERSCAMDB')
},
{
link: 'https://www.mycrypto.com/helpers.html',
text: translateRaw('FOOTER_HELP_AND_DEBUGGING')
},
2018-02-10 18:56:05 +00:00
{
link: 'mailto:press@mycrypto.com',
text: translateRaw('FOOTER_PRESS')
2018-02-10 18:56:05 +00:00
}
];
2018-02-10 18:56:05 +00:00
const AFFILIATES: Link[] = [
{
2018-02-10 18:56:05 +00:00
link: ledgerReferralURL,
2018-03-26 17:48:41 +00:00
text: translateRaw('LEDGER_REFERRAL_1')
},
{
2018-02-10 18:56:05 +00:00
link: trezorReferralURL,
text: translateRaw('TREZOR_REFERAL')
},
{
2018-02-10 18:56:05 +00:00
link: ethercardReferralURL,
text: translateRaw('ETHERCARD_REFERAL')
2018-02-10 18:56:05 +00:00
}
];
2018-02-10 18:56:05 +00:00
const FRIENDS: Link[] = [
{
2018-02-10 18:56:05 +00:00
link: 'https://metamask.io/',
text: 'MetaMask'
},
{
link: 'https://infura.io/',
text: 'Infura'
},
{
link: 'https://etherscan.io/',
text: 'Etherscan'
},
{
link: 'https://etherchain.org/',
text: 'Etherchain'
}
];
interface Link {
link: string;
text: string;
}
interface Props {
latestBlock: string;
}
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
};
Migrate to Typescript (#224) * Refactor babel/types * Refactor entry point * Refactor actions * Refactor api * Full project refactor -- Broad type fixing sweep * - completely fix merge conflicts - handle various type errors * Add tslint to package.json * Dependency cleanup * Fix module resolution * Work on type definitions for untyped libs * progress commit * Add more definition typing * various type additions * Add unit types * Fix sagaiterator + unit types * various types added * additional type additions * Fix typing on Sagas * remove flowfixmes; swap translate for translateRaw * Get rid of contracts - awaiting Henry's contract PR * Remove contracts from routing * Fix most of actions/reducers * refactor actions directory structure * fix reducer action type imports * Fix most of type errors pre-actions refactor * fix action creator imports in containers * Refactor more * Refactor index of actions * fix action imports; use module level index export * package-lock.json updated * Use action types in props * Type up action creators * Fix most of connect errors * Typefixing progress * More types * Fix run-time errors * Caching improvements for webpack * Remove path resolve from webpack * Update non-breaking packages to latest version * Fix token typing * Remove unused color code * Fix wallet decrypt dispatch * Set redux-form related props/functions to ANY, since we're stripping it out later on * Revert BigNumber.js package changes * Extend window to custom object for Perf * Format Navigation * Typecase keystore errors as any (since we shouldnt touch this) * Push wallet context fix * - find/replace value->payload in swap - properly type swap state properties - extract inline reducer into reducer function * - type local storage retrieved items as generic * - bind all RPCClient methods with fat arrow * - reformat * Change to enums for constants * Change state into any * Fix swap errors * ensure that seconds are passed into state as integers * Fix rest of errors * use parseInt explicitly instead of type coercion * Fix derivation-checker, remove flow command, add tslint command, add tslint-react, tell travis to use tslint instead of flow. * Whoops, remove those tests. * Remove unsupported (yet) config option. * Fix precommit to target ts and tsx files. * Fix some errors, ignore some silly rules. * Revert jest to v19, use ts-jest and make all tests typescript. Fixes all but one. * Get rid of saga tests * Fix tslint errors
2017-09-25 02:06:28 +00:00
public render() {
return (
<div>
2018-02-10 18:56:05 +00:00
<PreFooter openModal={this.toggleModal} />
<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">
{SOCIAL_MEDIA.map((socialMediaItem, idx) => (
<SocialMediaLink
link={socialMediaItem.link}
key={idx}
text={socialMediaItem.text}
/>
2018-02-10 18:56:05 +00:00
))}
</div>
<div className="Footer-links-links">
{PRODUCT_INFO.map((productInfoItem, idx) => (
<NewTabLink key={idx} href={productInfoItem.link}>
{productInfoItem.text}
</NewTabLink>
))}
</div>
</div>
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">
<a href="https://mycrypto.com">MyCrypto.com</a>
<NewTabLink href={knowledgeBaseURL}>{translateRaw('FOOTER_SUPPORT')}</NewTabLink>
<NewTabLink href="https://about.mycrypto.com">
{translateRaw('FOOTER_TEAM')}
</NewTabLink>
2018-02-10 18:56:05 +00:00
</div>
<p className="Footer-about-text">{translateRaw('FOOTER_ABOUT')}</p>
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">
<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>
</div>
2018-02-10 18:56:05 +00:00
<div className="Footer-support Footer-section">
<h5 className="Footer-support-title">{translateRaw('FOOTER_AFFILIATE_TITLE')}</h5>
2018-02-10 18:56:05 +00:00
<div className="Footer-support-affiliates">
{AFFILIATES.map((link, i) => (
<NewTabLink key={i} href={link.link}>
2018-02-10 18:56:05 +00:00
{link.text}
</NewTabLink>
))}
</div>
2018-02-10 18:56:05 +00:00
<div className="Footer-support-donate">
<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>
2018-02-10 18:56:05 +00:00
<div className="Footer-support-donate">
<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">
{FRIENDS.map((link, i) => (
<NewTabLink key={i} href={link.link}>
2018-02-10 18:56:05 +00:00
{link.text}
</NewTabLink>
))}
</div>
</div>
</footer>
2018-02-10 18:56:05 +00:00
<OnboardModal />
<DisclaimerModal isOpen={this.state.isDisclaimerOpen} handleClose={this.toggleModal} />
</div>
);
}
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
}