Connect username and hard reset

src/components/DashboardPage/index.js

@@ -33,6 +33,7 @@ import AccountCard from './AccountCard'
 import AccountsOrder from './AccountsOrder'
 
 const mapStateToProps = state => ({
+  username: state.settings.username,
   accounts: getVisibleAccounts(state),
   counterValue: getCounterValueCode(state),
 })
@@ -48,6 +49,7 @@ type Props = {
   accounts: Account[],
   push: Function,
   counterValue: string,
+  username: string,
 }
 
 type State = {
@@ -109,7 +111,7 @@ class DashboardPage extends PureComponent<Props, State> {
   _cacheBalance = null
 
   render() {
-    const { push, accounts, t, counterValue } = this.props
+    const { push, accounts, t, counterValue, username } = this.props
     const { accountsChunk, selectedTime, daysCount } = this.state
 
     const totalAccounts = accounts.length
@@ -119,7 +121,7 @@ class DashboardPage extends PureComponent<Props, State> {
         <Box horizontal alignItems="flex-end">
           <Box grow>
             <Text color="dark" ff="Museo Sans" fontSize={7}>
-              {t('dashboard:greetings', { name: 'Khalil' })}
+              {t('dashboard:greetings', { name: username })}
             </Text>
             <Text color="grey" fontSize={5} ff="Museo Sans|Light">
               {totalAccounts > 0

src/components/SettingsPage/index.js

@@ -43,7 +43,7 @@ type State = {
 
 class SettingsPage extends PureComponent<Props, State> {
   state = {
-    tab: 2,
+    tab: 0,
   }
 
   _items = []

src/components/SettingsPage/sections/Display.js

@@ -31,7 +31,7 @@ type Props = {
 
 type State = {
   cachedLanguageKey: string,
-  cachedCounterValue: ?string,
+  cachedCounterValue: ?Object,
 }
 
 class TabProfile extends PureComponent<Props, State> {
@@ -47,7 +47,7 @@ class TabProfile extends PureComponent<Props, State> {
     }
   }
 
-  handleChangeCounterValue = item => {
+  handleChangeCounterValue = (item: Object) => {
     const { saveSettings } = this.props
     this.setState({ cachedCounterValue: item.fiat })
     window.requestIdleCallback(() => {

src/components/SettingsPage/sections/Profile.js

@@ -2,12 +2,16 @@
 
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
+import { remote } from 'electron'
 
 import type { Settings, T } from 'types/common'
 
 import { unlock } from 'reducers/application'
+import db from 'helpers/db'
 
 import Input from 'components/base/Input'
+import Button from 'components/base/Button'
+import { ConfirmModal } from 'components/base/Modal'
 import IconUser from 'icons/User'
 
 import {
@@ -17,6 +21,14 @@ import {
   SettingsSectionRow as Row,
 } from '../SettingsSection'
 
+const mapStateToProps = state => ({
+  username: state.settings,
+})
+
+const mapDispatchToProps = {
+  unlock,
+}
+
 type Props = {
   t: T,
   settings: Settings,
@@ -24,19 +36,15 @@ type Props = {
   // unlock: Function,
 }
 
-type State = {}
+type State = {
-
+  isHardResetModalOpened: boolean,
-const mapStateToProps = state => ({
+  username: string,
-  username: state.settings,
-})
-
-const mapDispatchToProps = {
-  unlock,
 }
 
 class TabProfile extends PureComponent<Props, State> {
   state = {
     username: this.props.settings.username,
+    isHardResetModalOpened: false,
   }
 
   handleChangeUsername = username => {
@@ -47,9 +55,18 @@ class TabProfile extends PureComponent<Props, State> {
     })
   }
 
+  handleOpenHardResetModal = () => this.setState({ isHardResetModalOpened: true })
+  handleCloseHardResetModal = () => this.setState({ isHardResetModalOpened: false })
+
+  handleHardReset = () => {
+    db.resetAll()
+    remote.app.relaunch()
+    remote.app.exit()
+  }
+
   render() {
     const { t } = this.props
-    const { username } = this.state
+    const { username, isHardResetModalOpened } = this.state
 
     return (
       <Section>
@@ -71,15 +88,28 @@ class TabProfile extends PureComponent<Props, State> {
             {'-'}
           </Row>
           <Row title={t('settings:profile.sync')} desc={t('settings:profile.syncDesc')}>
-            {'-'}
+            <Button primary>{t('settings:profile.sync')}</Button>
           </Row>
           <Row title={t('settings:profile.export')} desc={t('settings:profile.exportDesc')}>
-            {'-'}
+            <Button primary>{t('settings:profile.export')}</Button>
           </Row>
           <Row title={t('settings:profile.reset')} desc={t('settings:profile.resetDesc')}>
-            {'-'}
+            <Button danger onClick={this.handleOpenHardResetModal}>
+              {t('settings:profile.resetButton')}
+            </Button>
           </Row>
         </Body>
+
+        <ConfirmModal
+          isDanger
+          isOpened={isHardResetModalOpened}
+          onClose={this.handleCloseHardResetModal}
+          onReject={this.handleCloseHardResetModal}
+          onConfirm={this.handleHardReset}
+          title={t('settings:hardResetModal.title')}
+          subTitle={t('settings:hardResetModal.subTitle')}
+          desc={t('settings:hardResetModal.desc')}
+        />
       </Section>
     )
   }

src/components/base/Box/index.js

@@ -11,12 +11,18 @@ import {
   fontSize,
   justifyContent,
   space,
+  style,
 } from 'styled-system'
 
 import fontFamily from 'styles/styled/fontFamily'
 
 import Text from 'components/base/Text'
 
+const textAlign = style({
+  prop: 'textAlign',
+  cssProperty: 'textAlign',
+})
+
 const Box = styled.div`
   ${alignItems};
   ${borderRadius};
@@ -27,6 +33,7 @@ const Box = styled.div`
   ${fontSize};
   ${justifyContent};
   ${space};
+  ${textAlign};
 
   display: flex;
   flex-shrink: ${p => (p.noShrink === true ? '0' : p.shrink === true ? '1' : '')};

src/components/base/Button/index.js

@@ -72,6 +72,7 @@ const Base = styled.button.attrs({
   fontSize: p => p.fontSize || 3,
   px: 2,
   color: 'grey',
+  bg: 'transparent',
 })`
   ${space};
   ${color};

src/components/base/Input/index.js

@@ -95,7 +95,7 @@ class Input extends PureComponent<Props, State> {
 
   handleClick = () => this._input && this._input.focus()
 
-  handleFocus = e => {
+  handleFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
     const { onFocus } = this.props
     this.setState({
       isFocus: true,
@@ -103,7 +103,7 @@ class Input extends PureComponent<Props, State> {
     onFocus(e)
   }
 
-  handleBlur = e => {
+  handleBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
     const { onBlur } = this.props
     this.setState({
       isFocus: false,

src/components/base/Modal/ConfirmModal.js

@@ -18,18 +18,33 @@ type Props = {
   desc: string,
   confirmText: string,
   cancelText: string,
+  onReject: Function,
+  onConfirm: Function,
   t: T,
 }
 
 class ConfirmModal extends PureComponent<Props> {
   render() {
-    const { isOpened, title, subTitle, desc, confirmText, cancelText, isDanger, t } = this.props
+    const {
+      isOpened,
+      title,
+      subTitle,
+      desc,
+      confirmText,
+      cancelText,
+      isDanger,
+      onReject,
+      onConfirm,
+      t,
+      ...props
+    } = this.props
 
     const realConfirmText = confirmText || t('common:confirm')
     const realCancelText = cancelText || t('common:cancel')
     return (
       <Modal
         isOpened={isOpened}
+        {...props}
         render={({ onClose }) => (
           <ModalBody onClose={onClose}>
             <ModalTitle>{title}</ModalTitle>
@@ -44,8 +59,8 @@ class ConfirmModal extends PureComponent<Props> {
               </Box>
             </ModalContent>
             <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
-              <Button>{realCancelText}</Button>
+              <Button onClick={onReject}>{realCancelText}</Button>
-              <Button primary={!isDanger} danger={isDanger}>
+              <Button onClick={onConfirm} primary={!isDanger} danger={isDanger}>
                 {realConfirmText}
               </Button>
             </ModalFooter>

src/components/base/Modal/index.js

@@ -21,6 +21,7 @@ import GrowScroll from 'components/base/GrowScroll'
 import Defer from 'components/base/Defer'
 
 export { default as ModalBody } from './ModalBody'
+export { default as ConfirmModal } from './ConfirmModal'
 
 const springConfig = {
   stiffness: 320,

src/types/common.js

@@ -14,6 +14,7 @@ export type Devices = Array<Device>
 
 export type Settings = {
   language: string,
+  username: string,
   counterValue: string,
   password: {
     isEnabled: boolean,

static/i18n/en/common.yml

@@ -1,4 +1,5 @@
 ok: Okay
+confirm: Confirm
 cancel: Cancel
 chooseWalletPlaceholder: Choose a wallet...
 currency: Currency

static/i18n/en/settings.yml

@@ -33,6 +33,7 @@ profile:
   exportDesc: Lorem ipsum dolor sit amet
   reset: Reset application
   resetDesc: Lorem ipsum dolor sit amet
+  resetButton: Hard reset
 about:
   faq: FAQ
   faqDesc: Lorem ipsum dolor sit amet
@@ -40,3 +41,7 @@ about:
   contactUsDesc: Lorem ipsum dolor sit amet
   terms: Terms and Privacy policy
   termsDesc: Lorem ipsum dolor sit amet
+hardResetModal:
+  title: Hard reset
+  subTitle: Are you sure houston?
+  desc: Lorem ipsum dolor sit amet