Polishing receive modal

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),
+  px: 4,
-  py: p => (p.notValid ? 0 : 3),
+  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<Props> {
+class CurrentAddress extends PureComponent<Props, { copyFeedback: boolean }> {
   static defaultProps = {
     addressVerified: null,
     amount: null,
@@ -145,6 +154,12 @@ class CurrentAddress extends PureComponent<Props> {
     withVerify: false,
   }
 
+  state = {
+    copyFeedback: false,
+  }
+
+  _isUnmounted = false
+
   render() {
     const {
       account: { name: accountName, currency },
@@ -163,6 +178,8 @@ class CurrentAddress extends PureComponent<Props> {
       ...props
     } = this.props
 
+    const { copyFeedback } = this.state
+
     const notValid = addressVerified === false
 
     return (
@@ -193,6 +210,7 @@ class CurrentAddress extends PureComponent<Props> {
           <IconInfoCircle size={12} />
         </Label>
         <Address withQRCode={withQRCode} notValid={notValid}>
+          {copyFeedback && <CopyFeedback>{t('app:common.addressCopied')}</CopyFeedback>}
           {address}
         </Address>
         {withBadge && (
@@ -207,11 +225,26 @@ class CurrentAddress extends PureComponent<Props> {
         )}
         {withFooter && (
           <Footer>
-            <FooterButton icon={<IconCheck size={16} />} label="Verify" onClick={onVerify} />
+            <FooterButton
+              icon={<IconRecheck size={16} />}
+              label={notValid ? t('app:common.verify') : t('app:common.reverify')}
+              onClick={onVerify}
+            />
             <CopyToClipboard
               data={address}
               render={copy => (
-                <FooterButton icon={<IconCopy size={16} />} label="Copy" onClick={copy} />
+                <FooterButton
+                  icon={<IconCopy size={16} />}
+                  label={t('app:common.copy')}
+                  onClick={() => {
+                    this.setState({ copyFeedback: true })
+                    setTimeout(() => {
+                      if (this._isUnmounted) return
+                      this.setState({ copyFeedback: false })
+                    }, 1e3)
+                    copy()
+                  }}
+                />
               )}
             />
           </Footer>

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<Props, State> {
   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) {

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<StepProps, State> {
 
   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<StepProps, State> {
     )
   }
 }
-
-export function StepReceiveFundsFooter({ t, closeModal }: StepProps) {
-  return (
-    <Button primary onClick={closeModal}>
-      {t('app:common.close')}
-    </Button>
-  )
-}

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: