Merge pull request #582 from NastiaS/minorFixesBranch

Minor fixes branch

src/components/IsUnlocked.js

@@ -4,22 +4,26 @@ import bcrypt from 'bcryptjs'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { compose } from 'redux'
+import { remote } from 'electron'
 import styled from 'styled-components'
 import { translate } from 'react-i18next'
 
 import type { SettingsState as Settings } from 'reducers/settings'
 import type { T } from 'types/common'
 import IconLockScreen from 'icons/LockScreen'
-
+import IconTriangleWarning from 'icons/TriangleWarning'
 import get from 'lodash/get'
 
 import { setEncryptionKey } from 'helpers/db'
+import hardReset from 'helpers/hardReset'
 
 import { fetchAccounts } from 'actions/accounts'
 import { isLocked, unlock } from 'reducers/application'
 
 import Box from 'components/base/Box'
 import InputPassword from 'components/base/InputPassword'
+import Button from './base/Button/index'
+import ConfirmModal from './base/Modal/ConfirmModal'
 
 type InputValue = {
   password: string,
@@ -36,6 +40,8 @@ type Props = {
 type State = {
   inputValue: InputValue,
   incorrectPassword: boolean,
+  isHardResetting: boolean,
+  isHardResetModalOpened: boolean,
 }
 
 const mapStateToProps = state => ({
@@ -53,6 +59,8 @@ const defaultState = {
     password: '',
   },
   incorrectPassword: false,
+  isHardResetting: false,
+  isHardResetModalOpened: false,
 }
 
 export const PageTitle = styled(Box).attrs({
@@ -96,6 +104,7 @@ class IsUnlocked extends Component<Props, State> {
         ...prev.inputValue,
         [key]: value,
       },
+      incorrectPassword: false,
     }))
 
   handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
@@ -117,8 +126,25 @@ class IsUnlocked extends Component<Props, State> {
     }
   }
 
+  handleOpenHardResetModal = () => this.setState({ isHardResetModalOpened: true })
+  handleCloseHardResetModal = () => this.setState({ isHardResetModalOpened: false })
+
+  handleHardReset = async () => {
+    this.setState({ isHardResetting: true })
+    try {
+      await hardReset()
+      remote.getCurrentWindow().webContents.reloadIgnoringCache()
+    } catch (err) {
+      this.setState({ isHardResetting: false })
+    }
+  }
+  hardResetIconRender = () => (
+    <IconWrapperCircle color="alertRed">
+      <IconTriangleWarning width={23} height={21} />
+    </IconWrapperCircle>
+  )
   render() {
-    const { inputValue, incorrectPassword } = this.state
+    const { inputValue, incorrectPassword, isHardResetting, isHardResetModalOpened } = this.state
     const { isLocked, t } = this.props
 
     if (isLocked) {
@@ -143,8 +169,22 @@ class IsUnlocked extends Component<Props, State> {
                   error={incorrectPassword && t('app:password.errorMessageIncorrectPassword')}
                 />
               </Box>
+              <Button type="button" mt={3} small onClick={this.handleOpenHardResetModal}>
+                {t('app:common.lockScreen.lostPassword')}
+              </Button>
             </Box>
           </form>
+          <ConfirmModal
+            isDanger
+            isLoading={isHardResetting}
+            isOpened={isHardResetModalOpened}
+            onClose={this.handleCloseHardResetModal}
+            onReject={this.handleCloseHardResetModal}
+            onConfirm={this.handleHardReset}
+            title={t('app:settings.hardResetModal.title')}
+            desc={t('app:settings.hardResetModal.desc')}
+            renderIcon={this.hardResetIconRender}
+          />
         </Box>
       )
     }
@@ -164,3 +204,12 @@ export default compose(
   ),
   translate(),
 )(IsUnlocked)
+
+const IconWrapperCircle = styled(Box).attrs({})`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #ea2e4919;
+  text-align: -webkit-center;
+  justify-content: center;
+`

src/components/Onboarding/steps/Analytics.js

@@ -19,7 +19,7 @@ type State = {
 }
 
 const INITIAL_STATE = {
-  analyticsToggle: true,
+  analyticsToggle: false,
   sentryLogsToggle: true,
 }
 

src/components/Onboarding/steps/GenuineCheck.js

@@ -129,7 +129,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
       <FixedTopContainer>
         <Box grow alignItems="center">
           <Title>{t('onboarding:genuineCheck.title')}</Title>
-          <Description>{t('onboarding:genuineCheck.desc')}</Description>
+          {onboarding.isLedgerNano ? (
+            <Description>{t('onboarding:genuineCheck.descNano')}</Description>
+          ) : (
+            <Description>{t('onboarding:genuineCheck.descBlue')}</Description>
+          )}
+
           <Box mt={5}>
             <CardWrapper>
               <Box justify="center">

src/components/SettingsPage/sections/Profile.js

@@ -2,6 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { remote } from 'electron'
 import bcrypt from 'bcryptjs'
 
@@ -19,6 +20,7 @@ import CheckBox from 'components/base/CheckBox'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import { ConfirmModal } from 'components/base/Modal'
+import IconTriangleWarning from 'icons/TriangleWarning'
 import IconUser from 'icons/User'
 import PasswordModal from '../PasswordModal'
 import DisablePasswordModal from '../DisablePasswordModal'
@@ -125,6 +127,12 @@ class TabProfile extends PureComponent<Props, State> {
     })
   }
 
+  hardResetIconRender = () => (
+    <IconWrapperCircle color="alertRed">
+      <IconTriangleWarning width={23} height={21} />
+    </IconWrapperCircle>
+  )
+
   render() {
     const { t, settings, saveSettings } = this.props
     const {
@@ -223,8 +231,8 @@ class TabProfile extends PureComponent<Props, State> {
           onReject={this.handleCloseHardResetModal}
           onConfirm={this.handleHardReset}
           title={t('app:settings.hardResetModal.title')}
-          subTitle={t('app:settings.hardResetModal.subTitle')}
           desc={t('app:settings.hardResetModal.desc')}
+          renderIcon={this.hardResetIconRender}
         />
 
         <PasswordModal
@@ -253,3 +261,13 @@ export default connect(
   null,
   mapDispatchToProps,
 )(TabProfile)
+
+// TODO: need a helper file for common styles across the app
+const IconWrapperCircle = styled(Box).attrs({})`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #ea2e4919;
+  text-align: -webkit-center;
+  justify-content: center;
+`

src/components/base/Modal/ConfirmModal.js

@@ -14,8 +14,9 @@ type Props = {
   isOpened: boolean,
   isDanger: boolean,
   title: string,
-  subTitle: string,
+  subTitle?: string,
   desc: string,
+  renderIcon?: Function,
   confirmText?: string,
   cancelText?: string,
   onReject: Function,
@@ -37,6 +38,7 @@ class ConfirmModal extends PureComponent<Props> {
       onReject,
       onConfirm,
       isLoading,
+      renderIcon,
       t,
       ...props
     } = this.props
@@ -57,6 +59,11 @@ class ConfirmModal extends PureComponent<Props> {
                   {subTitle}
                 </Box>
               )}
+              {renderIcon && (
+                <Box justifyContent="center" alignItems="center" mt={4} mb={3}>
+                  {renderIcon()}
+                </Box>
+              )}
               <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center">
                 {desc}
               </Box>

src/components/modals/AccountSettingRenderBody.js

@@ -151,6 +151,7 @@ class HelperComp extends PureComponent<Props, State> {
               <Box>
                 <Input
                   value={account.name}
+                  maxLength={30}
                   onChange={this.handleChangeName}
                   renderLeft={<InputLeft currency={account.currency} />}
                   onFocus={e => this.handleFocus(e, 'accountName')}

src/icons/TriangleWarning.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M6.217 2.188a2.085 2.085 0 0 1 3.566 0l5.653 9.437a2.083 2.083 0 0 1-1.79 3.125h-11.3A2.083 2.083 0 0 1 .57 11.615l5.647-9.427zm1.285.773l-5.64 9.414a.583.583 0 0 0 .491.875h11.285a.583.583 0 0 0 .505-.865L8.5 2.962a.583.583 0 0 0-.997-.001zM7.25 6a.75.75 0 0 1 1.5 0v2.667a.75.75 0 0 1-1.5 0V6zm1.5 5a.75.75 0 1 1-1.5 0v-.01a.75.75 0 1 1 1.5 0V11z"
+  />
+)
+
+export default ({ height, width, ...p }: { height: number, width: number }) => (
+  <svg viewBox="0 0 19 17" height={height} width={width} {...p}>
+    {path}
+  </svg>
+)

src/reducers/settings.js

@@ -72,7 +72,7 @@ const INITIAL_STATE: SettingsState = {
   region,
   developerMode: !!process.env.__DEV__,
   loaded: false,
-  shareAnalytics: true,
+  shareAnalytics: false,
   sentryLogs: true,
   lastUsedVersion: __APP_VERSION__,
 }

static/i18n/en/app.yml

@@ -31,6 +31,7 @@ common:
     subTitle: Your application is locked
     description: Please enter your password to continue
     inputPlaceholder: Type your password
+    lostPassword: I lost my password
   sync:
     syncing: Syncing...
     upToDate: Up to date
@@ -118,7 +119,7 @@ exchange:
   coinmama: 'Coinmama is a financial service that makes it fast, safe and fun to buy digital currency, anywhere in the world.'
 genuinecheck:
   modal:
-    title: Genuine check, bro
+    title: Genuine check
 addAccounts:
   title: Add accounts
   breadcrumb:
@@ -306,9 +307,8 @@ settings:
     terms: Terms and Privacy policy
     termsDesc: Lorem ipsum dolor sit amet
   hardResetModal:
-    title: Hard reset
+    title: Reset Ledger Live
-    subTitle: Are you sure houston?
+    desc: Resetting will erase all Ledger Live data stored on your computer, including your profile, accounts, transaction history and application settings. The keys to access your crypto assets in the blockchain remain secure on your Ledger device.
-    desc: Lorem ipsum dolor sit amet
   softResetModal:
     title: Clean application cache
     subTitle: Are you sure houston?

static/i18n/en/onboarding.yml

@@ -74,7 +74,8 @@ writeSeed:
     note4: Never use a device supplied with a recovery phrase and/or a PIN code.
 genuineCheck:
   title: Final security check
-  desc: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
+  descNano: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
+  descBlue: Your Ledger Blue should now display Your device is now ready. Before getting started, please confirm that
   steps:
     step1:
       title: Did you choose your PIN code by yourself?