Browse Source

Merge pull request #1250 from NastiaS/ui-polish-branch

add account error step in modal
master
Gaëtan Renaudeau 7 years ago
committed by GitHub
parent
commit
75d39e7496
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 14
      src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
  2. 7
      src/components/Onboarding/steps/GenuineCheck/index.js
  3. 14
      src/components/RenderError.js
  4. 16
      src/components/base/ExternalLinkButton.js
  5. 21
      src/components/base/RetryButton.js
  6. 67
      src/components/modals/AddAccounts/steps/03-step-import.js
  7. 7
      src/components/modals/AddAccounts/steps/04-step-finish.js
  8. 8
      src/components/modals/Receive/index.js
  9. 19
      src/components/modals/Receive/steps/03-step-confirm-address.js
  10. 7
      src/components/modals/Send/steps/04-step-confirmation.js
  11. 1
      static/i18n/en/app.json

14
src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js

@ -5,9 +5,11 @@ import { i } from 'helpers/staticPath'
import type { T } from 'types/common'
import type { OnboardingState } from 'reducers/onboarding'
import { urls } from 'config/urls'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import ExternalLinkButton from 'components/base/ExternalLinkButton'
import TrackPage from 'analytics/TrackPage'
import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents'
@ -15,7 +17,6 @@ import { Title, Description, OnboardingFooterWrapper } from '../../helperCompone
type Props = {
t: T,
redoGenuineCheck: () => void,
contactSupport: () => void,
onboarding: OnboardingState,
}
@ -69,7 +70,7 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
}
render() {
const { redoGenuineCheck, contactSupport, t } = this.props
const { redoGenuineCheck, t } = this.props
return (
<Box sticky pt={50}>
<Box grow alignItems="center" justifyContent="center">
@ -79,9 +80,12 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
<Button outlineGrey onClick={() => redoGenuineCheck()}>
{t('app:common.back')}
</Button>
<Button danger onClick={() => contactSupport()} ml="auto">
{t('onboarding:genuineCheck.buttons.contactSupport')}
</Button>
<ExternalLinkButton
danger
ml="auto"
label={t('onboarding:genuineCheck.buttons.contactSupport')}
url={urls.contactSupport}
/>
</OnboardingFooterWrapper>
</Box>
)

7
src/components/Onboarding/steps/GenuineCheck/index.js

@ -1,11 +1,9 @@
// @flow
import React, { PureComponent } from 'react'
import { openURL } from 'helpers/linking'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { colors } from 'styles/theme'
import { urls } from 'config/urls'
import { updateGenuineCheck } from 'reducers/onboarding'
@ -143,10 +141,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
})
}
contactSupport = () => {
openURL(urls.contactSupport)
}
handlePrevStep = () => {
const { prevStep, onboarding, jumpStep } = this.props
onboarding.flowType === 'initializedDevice' ? jumpStep('selectDevice') : prevStep()
@ -158,7 +152,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
renderGenuineFail = () => (
<GenuineCheckErrorPage
redoGenuineCheck={this.redoGenuineCheck}
contactSupport={this.contactSupport}
t={this.props.t}
onboarding={this.props.onboarding}
/>

14
src/components/RenderError.js

@ -17,6 +17,7 @@ import Box from 'components/base/Box'
import Space from 'components/base/Space'
import Button from 'components/base/Button'
import ConfirmModal from 'components/base/Modal/ConfirmModal'
import ExternalLinkButton from 'components/base/ExternalLinkButton'
import IconTriangleWarning from 'icons/TriangleWarning'
// SERIOUSLY plz refactor to use <ResetButton>
@ -51,10 +52,6 @@ class RenderError extends PureComponent<
openURL(urls.githubIssues)
}
contact = () => {
openURL(urls.contactSupport)
}
handleRestart = () => {
remote.getCurrentWindow().webContents.reloadIgnoringCache()
}
@ -96,9 +93,12 @@ class RenderError extends PureComponent<
{t('app:crash.restart')}
</Button>
<ExportLogsBtn withoutAppData={withoutAppData} />
<Button small primary onClick={this.contact}>
{t('app:crash.support')}
</Button>
<ExternalLinkButton
small
primary
label={t('app:crash.support')}
url={urls.contactSupport}
/>
<Button small primary onClick={this.github}>
{t('app:crash.github')}
</Button>

16
src/components/base/ExternalLinkButton.js

@ -0,0 +1,16 @@
// @flow
import React from 'react'
import { openURL } from 'helpers/linking'
import Button from 'components/base/Button'
export function ExternalLinkButton({ label, url, ...props }: { label: string, url: string }) {
return (
<Button onClick={() => openURL(url)} {...props}>
{label}
</Button>
)
}
export default ExternalLinkButton

21
src/components/base/RetryButton.js

@ -0,0 +1,21 @@
// @flow
import React, { PureComponent } from 'react'
import Button from 'components/base/Button'
import { translate } from 'react-i18next'
import type { T } from 'types/common'
type Props = {
t: T,
}
class RetryButton extends PureComponent<Props> {
render() {
const { t, ...props } = this.props
return <Button {...props}>{t('app:common.retry')}</Button>
}
}
export default translate()(RetryButton)

67
src/components/modals/AddAccounts/steps/03-step-import.js

@ -7,6 +7,9 @@ import { Trans } from 'react-i18next'
import React, { PureComponent, Fragment } from 'react'
import type { Account } from '@ledgerhq/live-common/lib/types'
import uniq from 'lodash/uniq'
import { urls } from 'config/urls'
import ExternalLinkButton from 'components/base/ExternalLinkButton'
import RetryButton from 'components/base/RetryButton'
import { getBridgeForCurrency } from 'bridge'
@ -33,6 +36,23 @@ const LoadingRow = styled(Box).attrs({
height: 48px;
border: 1px dashed ${p => p.theme.colors.grey};
`
const Title = styled(Box).attrs({
ff: 'Museo Sans',
fontSize: 5,
mt: 2,
color: 'black',
})`
text-align: center;
`
const Desc = styled(Box).attrs({
ff: 'Open Sans',
fontSize: 4,
mt: 2,
color: 'graphite',
})`
text-align: center;
`
class StepImport extends PureComponent<StepProps> {
componentDidMount() {
@ -167,21 +187,16 @@ class StepImport extends PureComponent<StepProps> {
const { err } = this.props
invariant(err, 'Trying to render inexisting error')
return (
<Box
style={{ height: 200 }}
px={5}
textAlign="center"
align="center"
justify="center"
color="alertRed"
>
<IconExclamationCircleThin size={43} />
<Box mt={4}>
<TranslatedError error={err} field="title" />
<Box style={{ height: 200 }} px={5} justify="center">
<Box color="alertRed" align="center">
<IconExclamationCircleThin size={43} />
</Box>
<Box mt={4}>
<Title>
<TranslatedError error={err} field="title" />
</Title>
<Desc>
<TranslatedError error={err} field="description" />
</Box>
</Desc>
</Box>
)
}
@ -353,25 +368,25 @@ export const StepImportFooter = ({
<Fragment>
{currency && <CurrencyBadge mr="auto" currency={currency} />}
{scanStatus === 'error' && (
<Button mr={2} onClick={() => setScanStatus('scanning')}>
{t('app:common.retry')}
</Button>
<Fragment>
<ExternalLinkButton mr={2} label={t('app:common.getSupport')} url={urls.faq} />
<RetryButton primary onClick={() => setScanStatus('scanning')} />
</Fragment>
)}
{scanStatus === 'scanning' && (
<Button mr={2} onClick={() => setScanStatus('finished')}>
{t('app:common.stop')}
</Button>
)}
<Button
primary
disabled={
(scanStatus !== 'finished' && scanStatus !== 'error') ||
!(willCreateAccount || willAddAccounts)
}
onClick={onClick}
>
{ctaWording}
</Button>
{scanStatus !== 'error' && (
<Button
primary
disabled={scanStatus !== 'finished' || !(willCreateAccount || willAddAccounts)}
onClick={onClick}
>
{ctaWording}
</Button>
)}
</Fragment>
)
}

7
src/components/modals/AddAccounts/steps/04-step-finish.js

@ -50,13 +50,10 @@ function StepFinish({ currency, t, checkedAccountsIds }: StepProps) {
export default StepFinish
export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => (
export const StepFinishFooter = ({ onGoStep1, t }: StepProps) => (
<Fragment>
<Button mr={2} outline onClick={onGoStep1}>
<Button mr={2} primary onClick={onGoStep1}>
{t('app:addAccounts.cta.addMore')}
</Button>
<Button primary onClick={onCloseModal}>
{t('app:common.close')}
</Button>
</Fragment>
)

8
src/components/modals/Receive/index.js

@ -12,8 +12,6 @@ import Track from 'analytics/Track'
import type { Account } from '@ledgerhq/live-common/lib/types'
import { MODAL_RECEIVE } from 'config/constants'
import { openURL } from 'helpers/linking'
import { urls } from 'config/urls'
import type { T, Device } from 'types/common'
import type { StepProps as DefaultStepProps } from 'components/base/Stepper'
@ -58,7 +56,6 @@ export type StepProps = DefaultStepProps & {
onChangeAccount: (?Account) => void,
onChangeAppOpened: boolean => void,
onChangeAddressVerified: (?boolean, ?Error) => void,
contactUs: () => void,
}
const createSteps = ({ t }: { t: T }) => [
@ -132,9 +129,7 @@ class ReceiveModal extends PureComponent<Props, State> {
isAddressVerified: null,
isAppOpened: false,
})
handleContactUs = () => {
openURL(urls.contactSupport)
}
handleReset = () => this.setState({ ...INITIAL_STATE })
handleCloseModal = () => this.props.closeModal(MODAL_RECEIVE)
@ -187,7 +182,6 @@ class ReceiveModal extends PureComponent<Props, State> {
onChangeAccount: this.handleChangeAccount,
onChangeAppOpened: this.handleChangeAppOpened,
onChangeAddressVerified: this.handleChangeAddressVerified,
contactUs: this.handleContactUs,
}
const errorSteps = verifyAddressError

19
src/components/modals/Receive/steps/03-step-confirm-address.js

@ -4,9 +4,12 @@ import styled from 'styled-components'
import React, { Fragment, PureComponent } from 'react'
import TrackPage from 'analytics/TrackPage'
import { urls } from 'config/urls'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import DeviceConfirm from 'components/DeviceConfirm'
import ExternalLinkButton from 'components/base/ExternalLinkButton'
import RetryButton from 'components/base/RetryButton'
import type { StepProps } from '../index'
import TranslatedError from '../../../TranslatedError'
@ -45,14 +48,16 @@ export default class StepConfirmAddress extends PureComponent<StepProps> {
}
}
export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }: StepProps) {
export function StepConfirmAddressFooter({ t, transitionTo, onRetry }: StepProps) {
// This will be displayed only if user rejected address
return (
<Fragment>
<Button onClick={contactUs} event="Receive Flow Step 3 Contact Us Clicked">
{t('app:receive.steps.confirmAddress.support')}
</Button>
<Button
<ExternalLinkButton
event="Receive Flow Step 3 Contact Us Clicked"
label={t('app:receive.steps.confirmAddress.support')}
url={urls.contactSupport}
/>
<RetryButton
ml={2}
primary
event="Receive Flow Step 3 Retry Clicked"
@ -60,9 +65,7 @@ export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }
onRetry()
transitionTo('device')
}}
>
{t('app:common.retry')}
</Button>
/>
</Fragment>
)
}

7
src/components/modals/Send/steps/04-step-confirmation.js

@ -11,6 +11,7 @@ import TrackPage from 'analytics/TrackPage'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import Spinner from 'components/base/Spinner'
import RetryButton from 'components/base/RetryButton'
import TranslatedError from 'components/TranslatedError'
import IconCheckCircle from 'icons/CheckCircle'
import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
@ -106,16 +107,14 @@ export function StepConfirmationFooter({
{t('app:send.steps.confirmation.success.cta')}
</Button>
) : error ? (
<Button
<RetryButton
ml={2}
primary
onClick={() => {
onRetry()
transitionTo('amount')
}}
>
{t('app:common.retry')}
</Button>
/>
) : null}
</Fragment>
)

1
static/i18n/en/app.json

@ -5,6 +5,7 @@
"apply": "Apply",
"confirm": "Confirm",
"cancel": "Cancel",
"getSupport": "Get Support",
"delete": "Delete",
"launch": "Launch",
"continue": "Continue",

Loading…
Cancel
Save