- +
{showExplorer && currentContract && ( diff --git a/common/sass/mixins.scss b/common/sass/mixins.scss index d0aa6655..de1be835 100644 --- a/common/sass/mixins.scss +++ b/common/sass/mixins.scss @@ -1,5 +1,5 @@ -@import "./variables"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins"; +@import './variables'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins'; @mixin bg-gradient { background: $ether-navy; @@ -16,7 +16,7 @@ @mixin clearfix { &:after { - content: ""; + content: ''; display: table; clear: both; } @@ -25,7 +25,7 @@ @mixin mono { font-family: $font-family-monospace; font-weight: normal; - letter-spacing: .02em; + letter-spacing: 0.02em; } @mixin ellipsis { @@ -96,3 +96,11 @@ transition-delay: 400ms, 400ms, 300ms; } } + +@mixin input-shadow($color) { + box-shadow: inset 0 1px 1px rgba(black, 0.075), 0 0 1px rgba($color, 0.5); +} + +@mixin input-focus-shadow($color) { + box-shadow: inset 0 1px 2px rgba(black, 0.125), 0 0 1px rgba($color, 0.5); +} diff --git a/common/sass/styles.scss b/common/sass/styles.scss index 0afe5b7e..8476ca9c 100644 --- a/common/sass/styles.scss +++ b/common/sass/styles.scss @@ -1,36 +1,36 @@ // Where shared common styles live // --- BOOTSTRAP --- -@import "./variables"; -@import "./mixins"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/print"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/type"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/code"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; +@import './variables'; +@import './mixins'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/normalize'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/print'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/type'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/code'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/grid'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/tables'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/forms'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/buttons'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/button-groups'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/input-groups'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/alerts'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/wells'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/close'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/utilities'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities'; // --- RC SLIDER --- -@import "~rc-slider/assets/index.css"; +@import '~rc-slider/assets/index.css'; // --- React Select --- @import '~react-select/dist/react-select.css'; // --- CUSTOM --- -@import "./styles/badbrowser"; -@import "./styles/noscript"; -@import "./styles/overrides"; -@import "./styles/scaffolding"; -@import "./styles/tab"; -@import "./fonts"; +@import './styles/badbrowser'; +@import './styles/noscript'; +@import './styles/overrides'; +@import './styles/scaffolding'; +@import './styles/tab'; +@import './fonts'; diff --git a/common/sass/styles/overrides.scss b/common/sass/styles/overrides.scss index c0d586d1..a3804e4e 100644 --- a/common/sass/styles/overrides.scss +++ b/common/sass/styles/overrides.scss @@ -1,13 +1,16 @@ // This contains all of the bootstrap style overrides we do. Files should // correspond to the bootstrap filename, and be placed in the overrides/ folder -@import "./overrides/alerts"; -@import "./overrides/buttons"; -@import "./overrides/button-groups"; -@import "./overrides/dropdowns"; -@import "./overrides/forms"; -@import "./overrides/grid"; -@import "./overrides/input-groups"; -@import "./overrides/type"; +@import './overrides/alerts'; +@import './overrides/buttons'; +@import './overrides/button-groups'; +@import './overrides/dropdowns'; +@import './overrides/forms'; +@import './overrides/grid'; +@import './overrides/input-groups'; +@import './overrides/type'; + +// Other overrides +@import './overrides/react-select'; // And an override for rc-slider -@import "./overrides/rc-slider"; +@import './overrides/rc-slider'; diff --git a/common/sass/styles/overrides/forms.scss b/common/sass/styles/overrides/forms.scss index 8cae53ce..748da317 100644 --- a/common/sass/styles/overrides/forms.scss +++ b/common/sass/styles/overrides/forms.scss @@ -33,12 +33,12 @@ input[readonly] { margin-top: $space-sm; margin-bottom: $space-sm; transition: $transition; + padding: $input-padding; &:focus { border-color: $input-border-focus; outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 1px rgba($brand-primary, 0.5); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba($brand-primary, 0.5); } } @@ -63,13 +63,11 @@ select.form-control { // Custom feedback classes @mixin form-control-state($color) { border-color: lighten($color, 20%); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) - 0 0 1px rgba($color, 0.1); + @include input-shadow($color); &:focus { border-color: lighten($color, 5%); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125), - 0 0 1px rgba($color, 0.5); + @include input-focus-shadow($color); } } diff --git a/common/sass/styles/overrides/react-select.scss b/common/sass/styles/overrides/react-select.scss new file mode 100644 index 00000000..b9be81bb --- /dev/null +++ b/common/sass/styles/overrides/react-select.scss @@ -0,0 +1,92 @@ +// This syntax is necessary to override css styles in react-select +.Select { + font-size: 1rem; + .Select-control { + height: $input-height-base; + display: block; + box-sizing: border-box; + font-weight: 400; + border-radius: 0px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + border: 1px solid $input-border; + transition: $transition; + &:hover { + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + border: 1px solid $input-border; + } + .Select-value { + padding-left: $input-padding-x; + padding-right: $input-padding-x; + .Select-value-label { + vertical-align: middle; + } + } + .Select-arrow-zone { + float: right; + position: relative; + top: 50%; + transform: translateY(-50%); + } + } + .Select-menu-outer { + box-sizing: content-box; + font-weight: 400; + border: 1px solid $input-border; + width: calc(100% - 1px); + } + .Select-placeholder { + color: #d3d3d3; + padding: 0px $input-padding-x; + line-height: $input-height-base; + } + .Select-input { + opacity: 0; + } + &.is-open { + .Select-control { + border: 1px solid $input-border; + } + } + &.is-focused { + &:not(.is-open):not(.is-invalid) { + .Select-control { + border-color: $brand-primary; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 1px rgba(14, 151, 192, 0.5); + } + } + } + + @mixin react-select-control-state($color) { + .Select-control { + border-color: lighten($color, 20%); + @include input-shadow($color); + } + .Select-menu-outer { + border-color: lighten($color, 20%); + @include input-shadow($color); + } + + &.is-focused { + .Select-control { + border-color: lighten($color, 5%); + @include input-focus-shadow($color); + } + .Select-menu-outer { + border-color: lighten($color, 5%); + @include input-focus-shadow($color); + } + } + } + + &.is-valid { + @include react-select-control-state($brand-success); + } + + &.is-invalid { + @include react-select-control-state($brand-danger); + } + + &.is-warning { + @include react-select-control-state($brand-warning); + } +} diff --git a/common/sass/variables/forms.scss b/common/sass/variables/forms.scss index 023c3a99..92ba05df 100644 --- a/common/sass/variables/forms.scss +++ b/common/sass/variables/forms.scss @@ -4,6 +4,9 @@ $input-color: #333333; $input-border: $gray-lighter; $input-border-focus: rgba($brand-primary, 0.6); $input-color-placeholder: darken($gray-lighter, 10%); +$input-padding-x: 1rem; +$input-padding-y: 0.75rem; +$input-padding: $input-padding-y $input-padding-x; $input-height-base: 2.55rem; $input-height-large: 4rem; @@ -20,7 +23,7 @@ $input-group-addon-border-color: $input-border; $cursor-disabled: default; $dropdown-bg: #fff; -$dropdown-border: rgba(0, 0, 0, .15); +$dropdown-border: rgba(0, 0, 0, 0.15); $dropdown-fallback-border: $gray-lighter; $dropdown-divider-bg: #e5e5e5; $dropdown-link-color: $ether-navy; From 2ac3015ad89d5b4e00eae35cbf72f6c04e6438cb Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Tue, 23 Jan 2018 22:54:32 -0600 Subject: [PATCH 005/138] chore(package): update @types/lodash to version 4.14.95 (#906) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 200c7fa1..0cb09e20 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@types/classnames": "2.2.3", "@types/history": "4.6.2", "@types/jest": "22.1.0", - "@types/lodash": "4.14.94", + "@types/lodash": "4.14.95", "@types/qrcode": "0.8.0", "@types/qrcode.react": "0.6.2", "@types/query-string": "5.0.1", From 4fb342a757eb3545067c1ab47b9a713b2230237a Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Wed, 24 Jan 2018 17:23:20 -0500 Subject: [PATCH 006/138] Discourage private keys (pt. 1) (#780) * Insecure wallet blocker warning before unlocking insecure wallet. * Wrap in quotes to avoid prettier error. * Make account the homepage. Add a link to generate on the wallet unlock component. * Fix send routing weirdness. --- common/Root.tsx | 5 +- .../Header/components/Navigation.tsx | 9 +- .../WalletDecrypt/WalletDecrypt.scss | 6 + .../WalletDecrypt/WalletDecrypt.tsx | 106 +++++++++----- .../components/InsecureWalletWarning.scss | 51 +++++++ .../components/InsecureWalletWarning.tsx | 138 ++++++++++++++++++ .../WalletDecrypt/components/PrivateKey.tsx | 2 + .../WalletDecrypt/components/index.tsx | 1 + common/components/ui/UnlockHeader.tsx | 9 +- .../containers/Tabs/SendTransaction/index.tsx | 66 +++++---- 10 files changed, 311 insertions(+), 82 deletions(-) create mode 100644 common/components/WalletDecrypt/components/InsecureWalletWarning.scss create mode 100644 common/components/WalletDecrypt/components/InsecureWalletWarning.tsx diff --git a/common/Root.tsx b/common/Root.tsx index a869fd86..38ea866f 100644 --- a/common/Root.tsx +++ b/common/Root.tsx @@ -59,16 +59,15 @@ export default class Root extends Component { const routes = ( - - + + - diff --git a/common/components/Header/components/Navigation.tsx b/common/components/Header/components/Navigation.tsx index 1f68c236..103070f2 100644 --- a/common/components/Header/components/Navigation.tsx +++ b/common/components/Header/components/Navigation.tsx @@ -10,15 +10,14 @@ export interface TabLink { } const tabs: TabLink[] = [ - { - name: 'NAV_GenerateWallet', - to: '/generate' - }, - { name: 'Account View & Send', to: '/account' }, + { + name: 'NAV_GenerateWallet', + to: '/generate' + }, { name: 'NAV_Swap', to: '/swap' diff --git a/common/components/WalletDecrypt/WalletDecrypt.scss b/common/components/WalletDecrypt/WalletDecrypt.scss index 9b5f7c2d..35ba52e7 100644 --- a/common/components/WalletDecrypt/WalletDecrypt.scss +++ b/common/components/WalletDecrypt/WalletDecrypt.scss @@ -45,6 +45,12 @@ $speed: 500ms; margin: 0; } } + + &-generate { + text-align: center; + font-weight: 300; + margin-top: $space; + } } &-decrypt { diff --git a/common/components/WalletDecrypt/WalletDecrypt.tsx b/common/components/WalletDecrypt/WalletDecrypt.tsx index 1276e67c..d0a330c9 100644 --- a/common/components/WalletDecrypt/WalletDecrypt.tsx +++ b/common/components/WalletDecrypt/WalletDecrypt.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; import isEmpty from 'lodash/isEmpty'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { @@ -27,7 +28,8 @@ import { TrezorDecrypt, ViewOnlyDecrypt, Web3Decrypt, - WalletButton + WalletButton, + InsecureWalletWarning } from './components'; import { AppState } from 'reducers'; import DISABLES from './disables'; @@ -52,6 +54,7 @@ import { getNetworkConfig } from '../../selectors/config'; interface OwnProps { hidden?: boolean; disabledWallets?: WalletName[]; + showGenerateLink?: boolean; } interface DispatchProps { @@ -78,6 +81,7 @@ type UnlockParams = {} | PrivateKeyValue; interface State { selectedWalletKey: WalletName | null; value: UnlockParams | null; + hasAcknowledgedInsecure: boolean; } interface BaseWalletInfo { @@ -121,6 +125,10 @@ type Wallets = SecureWallets & InsecureWallets & MiscWallet; const WEB3_TYPE: string | false = (window as any).web3 && (window as any).web3.currentProvider.constructor.name; +const SECURE_WALLETS = Object.values(SecureWalletName); +const INSECURE_WALLETS = Object.values(InsecureWalletName); +const MISC_WALLETS = Object.values(MiscWalletName); + export class WalletDecrypt extends Component { // https://github.com/Microsoft/TypeScript/issues/13042 // index signature should become [key: Wallets] (from config) once typescript bug is fixed @@ -197,7 +205,8 @@ export class WalletDecrypt extends Component { public state: State = { selectedWalletKey: null, - value: null + value: null, + hasAcknowledgedInsecure: false }; public componentWillReceiveProps(nextProps: Props) { @@ -220,36 +229,59 @@ export class WalletDecrypt extends Component { } public getDecryptionComponent() { + const { selectedWalletKey, hasAcknowledgedInsecure } = this.state; const selectedWallet = this.getSelectedWallet(); - if (!selectedWallet) { + if (!selectedWalletKey || !selectedWallet) { return null; } + if (INSECURE_WALLETS.includes(selectedWalletKey) && !hasAcknowledgedInsecure) { + return ( +
+ +
+ ); + } + return ( - +
+ +

+ {!selectedWallet.isReadOnly && 'Unlock your'} {translate(selectedWallet.lid)} +

+
+ +
+
); } - public buildWalletOptions() { - const SECURE_WALLETS = Object.values(SecureWalletName); - const INSECURE_WALLETS = Object.values(InsecureWalletName); - const MISC_WALLETS = Object.values(MiscWalletName); + public handleAcknowledgeInsecure = () => { + this.setState({ hasAcknowledgedInsecure: true }); + }; + public buildWalletOptions() { return (

{translate('decrypt_Access')}

@@ -305,6 +337,12 @@ export class WalletDecrypt extends Component { ); })}
+ + {this.props.showGenerateLink && ( +
+ Don’t have a wallet? Click here to get one. +
+ )}