From 12890d78f5e059adb8b29cdd3ef777fe7b971806 Mon Sep 17 00:00:00 2001 From: meriadec Date: Thu, 28 Jun 2018 18:47:12 +0200 Subject: [PATCH] Polishing receive modal --- src/components/CurrentAddress/index.js | 53 +++++++++++++++---- src/components/modals/Receive/index.js | 7 +-- .../Receive/steps/04-step-receive-funds.js | 10 +--- static/i18n/en/app.yml | 4 ++ 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/components/CurrentAddress/index.js b/src/components/CurrentAddress/index.js index a4529e09..8c48e94a 100644 --- a/src/components/CurrentAddress/index.js +++ b/src/components/CurrentAddress/index.js @@ -16,7 +16,7 @@ import Box from 'components/base/Box' import CopyToClipboard from 'components/base/CopyToClipboard' import QRCode from 'components/base/QRCode' -import IconCheck from 'icons/Check' +import IconRecheck from 'icons/Recover' import IconCopy from 'icons/Copy' import IconInfoCircle from 'icons/InfoCircle' import IconShield from 'icons/Shield' @@ -27,26 +27,34 @@ const Container = styled(Box).attrs({ bg: p => p.withQRCode ? (p.notValid ? rgba(p.theme.colors.alertRed, 0.02) : 'lightGrey') : 'transparent', py: 4, - px: 7, + px: 5, })` border: ${p => (p.notValid ? `1px dashed ${rgba(p.theme.colors.alertRed, 0.5)}` : 'none')}; ` const Address = styled(Box).attrs({ - bg: p => (p.notValid ? 'transparent' : p.withQRCode ? 'white' : 'lightGrey'), + bg: 'white', borderRadius: 1, color: 'dark', ff: 'Open Sans|SemiBold', fontSize: 4, mt: 2, - px: p => (p.notValid ? 0 : 4), - py: p => (p.notValid ? 0 : 3), + px: 4, + py: 3, + relative: true, })` - border: ${p => (p.notValid ? 'none' : `1px dashed ${p.theme.colors.fog}`)}; + border: ${p => `1px dashed ${p.theme.colors.fog}`}; cursor: text; user-select: text; ` +const CopyFeedback = styled(Box).attrs({ + sticky: true, + bg: 'white', + align: 'center', + justify: 'center', +})`` + const Label = styled(Box).attrs({ alignItems: 'center', color: 'graphite', @@ -77,10 +85,11 @@ const FooterButtonWrapper = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', borderRadius: 1, + px: 2, })` + line-height: 1; cursor: pointer; height: 55px; - width: 55px; &:hover { background-color: ${p => rgba(p.theme.colors.wallet, 0.1)}; @@ -131,7 +140,7 @@ type Props = { withVerify: boolean, } -class CurrentAddress extends PureComponent { +class CurrentAddress extends PureComponent { static defaultProps = { addressVerified: null, amount: null, @@ -145,6 +154,12 @@ class CurrentAddress extends PureComponent { withVerify: false, } + state = { + copyFeedback: false, + } + + _isUnmounted = false + render() { const { account: { name: accountName, currency }, @@ -163,6 +178,8 @@ class CurrentAddress extends PureComponent { ...props } = this.props + const { copyFeedback } = this.state + const notValid = addressVerified === false return ( @@ -193,6 +210,7 @@ class CurrentAddress extends PureComponent {
+ {copyFeedback && {t('app:common.addressCopied')}} {address}
{withBadge && ( @@ -207,11 +225,26 @@ class CurrentAddress extends PureComponent { )} {withFooter && (
- } label="Verify" onClick={onVerify} /> + } + label={notValid ? t('app:common.verify') : t('app:common.reverify')} + onClick={onVerify} + /> ( - } label="Copy" onClick={copy} /> + } + label={t('app:common.copy')} + onClick={() => { + this.setState({ copyFeedback: true }) + setTimeout(() => { + if (this._isUnmounted) return + this.setState({ copyFeedback: false }) + }, 1e3) + copy() + }} + /> )} />
diff --git a/src/components/modals/Receive/index.js b/src/components/modals/Receive/index.js index d5cb47a8..9b19e729 100644 --- a/src/components/modals/Receive/index.js +++ b/src/components/modals/Receive/index.js @@ -25,7 +25,7 @@ import Stepper from 'components/base/Stepper' import StepAccount, { StepAccountFooter } from './steps/01-step-account' import StepConnectDevice, { StepConnectDeviceFooter } from './steps/02-step-connect-device' import StepConfirmAddress, { StepConfirmAddressFooter } from './steps/03-step-confirm-address' -import StepReceiveFunds, { StepReceiveFundsFooter } from './steps/04-step-receive-funds' +import StepReceiveFunds from './steps/04-step-receive-funds' type Props = { t: T, @@ -54,7 +54,7 @@ export type StepProps = DefaultStepProps & { onResetSkip: void => void, onChangeAccount: (?Account) => void, onChangeAppOpened: boolean => void, - onChangeAddressVerified: boolean => void, + onChangeAddressVerified: ?boolean => void, } const createSteps = ({ t }: { t: T }) => [ @@ -83,7 +83,6 @@ const createSteps = ({ t }: { t: T }) => [ id: 'receive', label: t('app:receive.steps.receiveFunds.title'), component: StepReceiveFunds, - footer: StepReceiveFundsFooter, }, ] @@ -131,6 +130,8 @@ class ReceiveModal extends PureComponent { handleChangeAddressVerified = (isAddressVerified: boolean) => { if (isAddressVerified) { this.setState({ isAddressVerified }) + } else if (isAddressVerified === null) { + this.setState({ isAddressVerified: null, errorSteps: [] }) } else { const confirmStepIndex = this.STEPS.findIndex(step => step.id === 'confirm') if (confirmStepIndex > -1) { diff --git a/src/components/modals/Receive/steps/04-step-receive-funds.js b/src/components/modals/Receive/steps/04-step-receive-funds.js index 7909625d..e963fb8d 100644 --- a/src/components/modals/Receive/steps/04-step-receive-funds.js +++ b/src/components/modals/Receive/steps/04-step-receive-funds.js @@ -4,7 +4,6 @@ import invariant from 'invariant' import React, { PureComponent } from 'react' import TrackPage from 'analytics/TrackPage' -import Button from 'components/base/Button' import Box from 'components/base/Box' import Label from 'components/base/Label' import CurrentAddressForAccount from 'components/CurrentAddressForAccount' @@ -23,6 +22,7 @@ export default class StepReceiveFunds extends PureComponent { handleChangeAmount = (amount: number) => this.setState({ amount }) handleGoPrev = () => { + this.props.onChangeAddressVerified(null) this.props.onChangeAppOpened(false) this.props.onResetSkip() this.props.transitionTo('device') @@ -58,11 +58,3 @@ export default class StepReceiveFunds extends PureComponent { ) } } - -export function StepReceiveFundsFooter({ t, closeModal }: StepProps) { - return ( - - ) -} diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index e300293f..d66997b9 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -31,6 +31,10 @@ common: close: Close eastern: Eastern western: Western + reverify: Re-verify + verify: Verify + copy: Copy + addressCopied: Address copied! lockScreen: title: Welcome back subTitle: