From a3fe8db5cfb040786495d3586057512730d5b4f9 Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Wed, 13 Jun 2018 20:21:02 -0400 Subject: [PATCH] No Private Keys Online (#1466) * Alternative generate options * Back button when choosing wallet options * Disable insecure wallets online. * Style adjustments. * Splash of color, generate on html build too. * Removed unnecessary image * Delete file --- common/assets/images/wallets/file.svg | 3 + common/assets/images/wallets/hardware.svg | 12 + .../WalletDecrypt/WalletDecrypt.scss | 11 + .../WalletDecrypt/WalletDecrypt.tsx | 36 ++- .../components/DeprecationWarning.tsx | 12 - .../components/InsecureWalletWarning.scss | 44 ++- .../components/InsecureWalletWarning.tsx | 116 +------ .../WalletDecrypt/components/Keystore.tsx | 2 - .../WalletDecrypt/components/Mnemonic.tsx | 2 - .../WalletDecrypt/components/PrivateKey.tsx | 2 - .../GenerateWallet/components/Template.tsx | 12 +- .../components/WalletTypes.scss | 199 +++++++++++- .../GenerateWallet/components/WalletTypes.tsx | 305 +++++++++++++++--- common/translations/index.tsx | 3 +- common/translations/lang/en.json | 48 ++- 15 files changed, 579 insertions(+), 228 deletions(-) create mode 100644 common/assets/images/wallets/file.svg create mode 100644 common/assets/images/wallets/hardware.svg delete mode 100644 common/components/WalletDecrypt/components/DeprecationWarning.tsx diff --git a/common/assets/images/wallets/file.svg b/common/assets/images/wallets/file.svg new file mode 100644 index 00000000..31f2a29e --- /dev/null +++ b/common/assets/images/wallets/file.svg @@ -0,0 +1,3 @@ + + + diff --git a/common/assets/images/wallets/hardware.svg b/common/assets/images/wallets/hardware.svg new file mode 100644 index 00000000..0821465f --- /dev/null +++ b/common/assets/images/wallets/hardware.svg @@ -0,0 +1,12 @@ + + + + Artboard + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/common/components/WalletDecrypt/WalletDecrypt.scss b/common/components/WalletDecrypt/WalletDecrypt.scss index 6d9bb4f9..7c8b024f 100644 --- a/common/components/WalletDecrypt/WalletDecrypt.scss +++ b/common/components/WalletDecrypt/WalletDecrypt.scss @@ -111,6 +111,17 @@ $speed: 500ms; overflow: hidden; text-overflow: ellipsis; } + + &-override { + position: absolute; + bottom: 0; + right: 0; + opacity: 0.3; + + &:hover { + opacity: 1; + } + } } } diff --git a/common/components/WalletDecrypt/WalletDecrypt.tsx b/common/components/WalletDecrypt/WalletDecrypt.tsx index 041731b0..67da153a 100644 --- a/common/components/WalletDecrypt/WalletDecrypt.tsx +++ b/common/components/WalletDecrypt/WalletDecrypt.tsx @@ -79,8 +79,8 @@ type Props = OwnProps & StateProps & DispatchProps & RouteComponentProps<{}>; type UnlockParams = {} | PrivateKeyValue; interface State { selectedWalletKey: WalletName | null; + isInsecureOverridden: boolean; value: UnlockParams | null; - hasAcknowledgedInsecure: boolean; } interface BaseWalletInfo { @@ -204,8 +204,8 @@ const WalletDecrypt = withRouter( public state: State = { selectedWalletKey: null, - value: null, - hasAcknowledgedInsecure: false + isInsecureOverridden: false, + value: null }; public UNSAFE_componentWillReceiveProps(nextProps: Props) { @@ -228,20 +228,28 @@ const WalletDecrypt = withRouter( } public getDecryptionComponent() { - const { selectedWalletKey, hasAcknowledgedInsecure } = this.state; + const { selectedWalletKey, isInsecureOverridden } = this.state; const selectedWallet = this.getSelectedWallet(); if (!selectedWalletKey || !selectedWallet) { return null; } - if (INSECURE_WALLETS.includes(selectedWalletKey) && !hasAcknowledgedInsecure) { + const isInsecure = INSECURE_WALLETS.includes(selectedWalletKey); + if (isInsecure && !isInsecureOverridden && !process.env.BUILD_DOWNLOADABLE) { return (
+ {process.env.NODE_ENV !== 'production' && ( + + )}
); } @@ -289,10 +297,6 @@ const WalletDecrypt = withRouter( ); } - public handleAcknowledgeInsecure = () => { - this.setState({ hasAcknowledgedInsecure: true }); - }; - public buildWalletOptions() { const { computedDisabledWallets } = this.props; const { reasons } = computedDisabledWallets; @@ -386,8 +390,7 @@ const WalletDecrypt = withRouter( window.setTimeout(() => { this.setState({ selectedWalletKey: walletType, - value: wallet.initialParams, - hasAcknowledgedInsecure: false + value: wallet.initialParams }); }, timeout); }; @@ -395,8 +398,7 @@ const WalletDecrypt = withRouter( public clearWalletChoice = () => { this.setState({ selectedWalletKey: null, - value: null, - hasAcknowledgedInsecure: false + value: null }); }; @@ -448,6 +450,12 @@ const WalletDecrypt = withRouter( private isWalletDisabled = (walletKey: WalletName) => { return this.props.computedDisabledWallets.wallets.indexOf(walletKey) !== -1; }; + + private overrideInsecureWarning = () => { + if (process.env.NODE_ENV !== 'production') { + this.setState({ isInsecureOverridden: true }); + } + }; } ); diff --git a/common/components/WalletDecrypt/components/DeprecationWarning.tsx b/common/components/WalletDecrypt/components/DeprecationWarning.tsx deleted file mode 100644 index 82eab917..00000000 --- a/common/components/WalletDecrypt/components/DeprecationWarning.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import translate from 'translations'; - -const DeprecationWarning: React.SFC<{}> = () => { - if (process.env.BUILD_DOWNLOADABLE) { - return null; - } - - return
{translate('INSECURE_WALLET_DEPRECATION')}
; -}; - -export default DeprecationWarning; diff --git a/common/components/WalletDecrypt/components/InsecureWalletWarning.scss b/common/components/WalletDecrypt/components/InsecureWalletWarning.scss index d93742a9..18452983 100644 --- a/common/components/WalletDecrypt/components/InsecureWalletWarning.scss +++ b/common/components/WalletDecrypt/components/InsecureWalletWarning.scss @@ -1,36 +1,48 @@ @import 'common/sass/variables'; +@import 'common/sass/mixins'; .WalletWarning { - max-width: 780px; + max-width: 820px; margin: 0 auto; - text-align: left; + text-align: center; &-title { color: $brand-danger; - margin-top: 0; + margin: 0 0 $space; } &-desc { - margin-bottom: $space; - } - - &-check { - margin-bottom: $space * 2; - } - - &-checkboxes { margin-bottom: $space * 2; } &-buttons { display: flex; + flex-direction: column; flex-wrap: wrap; - margin-bottom: -$space-sm; + justify-content: center; + max-width: 440px; + margin: 0 auto #{-$space}; - .btn { - flex: 1; - min-width: 280px; - margin: 0 $space-sm $space-sm; + &-btn { + width: 100%; + margin: 0 0 $space; + + &.is-cancel { + @include reset-button; + opacity: 0.4; + transition: $transition; + + &:hover { + opacity: 1; + } + + .fa { + position: relative; + top: -1px; + margin-right: $space-xs; + font-size: 11px; + } + } } } } diff --git a/common/components/WalletDecrypt/components/InsecureWalletWarning.tsx b/common/components/WalletDecrypt/components/InsecureWalletWarning.tsx index d1d32845..f24abef6 100644 --- a/common/components/WalletDecrypt/components/InsecureWalletWarning.tsx +++ b/common/components/WalletDecrypt/components/InsecureWalletWarning.tsx @@ -1,129 +1,43 @@ import React from 'react'; -import { HELP_ARTICLE, DOWNLOAD_MYCRYPTO_LINK } from 'config'; -import './InsecureWalletWarning.scss'; import translate from 'translations'; -import { knowledgeBaseURL } from 'config/data'; +import { NewTabLink } from 'components/ui'; +import './InsecureWalletWarning.scss'; interface Props { walletType: string; - onContinue(): void; onCancel(): void; } -interface State { - hasConfirmedSite: boolean; - hasAcknowledgedDownload: boolean; - hasAcknowledgedWallets: boolean; -} - -interface Checkbox { - name: keyof State; - label: string | React.ReactElement; -} - -export class InsecureWalletWarning extends React.Component { - public state: State = { - hasConfirmedSite: false, - hasAcknowledgedDownload: false, - hasAcknowledgedWallets: false - }; - +export class InsecureWalletWarning extends React.Component { constructor(props: Props) { super(props); - if (process.env.BUILD_DOWNLOADABLE) { - props.onContinue(); - } } public render() { - if (process.env.BUILD_DOWNLOADABLE) { - return null; - } - - const { walletType, onContinue, onCancel } = this.props; - const checkboxes: Checkbox[] = [ - { - name: 'hasAcknowledgedWallets', - label: translate('INSECURE_WALLET_WARNING_1') - }, - { - name: 'hasAcknowledgedDownload', - label: translate('INSECURE_WALLET_WARNING_2') - }, - { - name: 'hasConfirmedSite', - label: translate('INSECURE_WALLET_WARNING_3') - } - ]; - const canContinue = checkboxes.reduce( - (prev, checkbox) => prev && this.state[checkbox.name], - true - ); + const { walletType, onCancel } = this.props; return (
-

{translate('INSECURE_WALLET_TYPE_TITLE')}

+

+ {translate('INSECURE_WALLET_TYPE_TITLE', { $wallet_type: walletType })} +

{translate('INSECURE_WALLET_TYPE_DESC', { $wallet_type: walletType })}

-
    -
  • - {translate('INSECURE_WALLET_RECOMMEND_1', { - $metamask_article: knowledgeBaseURL + '/' + HELP_ARTICLE.MIGRATE_TO_METAMASK, - $hardware_wallet_article: - knowledgeBaseURL + '/' + HELP_ARTICLE.HARDWARE_WALLET_RECOMMENDATIONS - })} -
    • -
  • - {translate('INSECURE_WALLET_RECOMMEND_2', { - $download_mycrypto: DOWNLOAD_MYCRYPTO_LINK - })} -
    • -
  • - {translate('INSECURE_WALLET_RECOMMEND_3', { - $secure_your_eth_article: knowledgeBaseURL + '/' + HELP_ARTICLE.SECURING_YOUR_ETH - })} -
    • -
-

- {translate('WALLET_WARNING_CHECK', { $wallet_type: walletType })} -

-
{checkboxes.map(this.makeCheckbox)}
- -
); } - - private makeCheckbox = (checkbox: Checkbox) => { - return ( - - ); - }; - - private handleCheckboxChange = (ev: React.FormEvent) => { - this.setState({ - [ev.currentTarget.name as any]: !!ev.currentTarget.checked - }); - }; } diff --git a/common/components/WalletDecrypt/components/Keystore.tsx b/common/components/WalletDecrypt/components/Keystore.tsx index 1705f28e..5ed28907 100644 --- a/common/components/WalletDecrypt/components/Keystore.tsx +++ b/common/components/WalletDecrypt/components/Keystore.tsx @@ -4,7 +4,6 @@ import translate, { translateRaw } from 'translations'; import Spinner from 'components/ui/Spinner'; import { TShowNotification } from 'actions/notifications'; import { Input } from 'components/ui'; -import DeprecationWarning from './DeprecationWarning'; export interface KeystoreValue { file: string; @@ -45,7 +44,6 @@ export class KeystoreDecrypt extends PureComponent { return (
-
{ return ( -
{ return ( -