75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import translate from 'translations';
|
|
import { WalletType } from '../GenerateWallet';
|
|
import { NewTabLink, HelpLink } from 'components/ui';
|
|
import { HELP_ARTICLE, trezorReferralURL, ledgerReferralURL } from 'config';
|
|
import { Link } from 'react-router-dom';
|
|
import './WalletTypes.scss';
|
|
|
|
const WalletTypes: React.SFC<{}> = () => {
|
|
const typeInfo = {
|
|
[WalletType.Keystore]: {
|
|
name: 'x_Keystore2',
|
|
bullets: [
|
|
'An encrypted JSON file, protected by a password',
|
|
'Back it up on a USB drive',
|
|
'Cannot be written, printed, or easily transferred to mobile',
|
|
'Compatible with Mist, Parity, Geth',
|
|
'Provides a single address for sending and receiving'
|
|
]
|
|
},
|
|
[WalletType.Mnemonic]: {
|
|
name: 'x_Mnemonic',
|
|
bullets: [
|
|
'A 12-word private seed phrase',
|
|
'Back it up on paper or USB drive',
|
|
'Can be written, printed, and easily typed on mobile, too',
|
|
'Compatible with MetaMask, Jaxx, imToken, and more',
|
|
'Provides unlimited addresses for sending and receiving'
|
|
]
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="WalletTypes Tab-content-pane">
|
|
<h1 className="WalletTypes-title">{translate('NAV_GenerateWallet')}</h1>
|
|
<p className="WalletTypes-subtitle alert alert-warning">
|
|
<strong>Warning</strong>: Managing your own keys can be risky and a single mistake can lead
|
|
to irrecoverable loss. If you are new to cryptocurrencies, we strongly recommend using{' '}
|
|
<NewTabLink href="https://metamask.io/">MetaMask</NewTabLink>, or purchasing a{' '}
|
|
<NewTabLink href={ledgerReferralURL}>Ledger</NewTabLink> or{' '}
|
|
<NewTabLink href={trezorReferralURL}>TREZOR</NewTabLink> hardware wallet.{' '}
|
|
<HelpLink article={HELP_ARTICLE.DIFFERENCE_BETWEEN_PKEY_AND_KEYSTORE}>
|
|
Learn more about different wallet types & staying secure.
|
|
</HelpLink>
|
|
</p>
|
|
|
|
<div className="WalletTypes-types row">
|
|
<div className="col-md-1" />
|
|
{Object.keys(typeInfo).map((type: keyof typeof typeInfo) => (
|
|
<div key={type} className="WalletType col-md-5">
|
|
<h2 className="WalletType-title">{translate(typeInfo[type].name)}</h2>
|
|
<ul className="WalletType-features">
|
|
{typeInfo[type].bullets.map(bullet => (
|
|
<li key={bullet} className="WalletType-features-feature">
|
|
{translate(bullet)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="WalletType-select">
|
|
<Link
|
|
className="WalletType-select-btn btn btn-primary btn-block"
|
|
to={`/generate/${type}`}
|
|
>
|
|
Generate a {translate(typeInfo[type].name)}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WalletTypes;
|