Merge pull request #759 from meriadec/polish

Polish

src/components/modals/OperationDetails.js

@@ -155,6 +155,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
               <Box my={4} alignItems="center">
                 <Box>
                   <FormattedVal
+                    color={amount < 0 ? 'smoke' : undefined}
                     unit={unit}
                     alwaysShowSign
                     showCode
@@ -242,16 +243,13 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
         <GradientBox />
       </ModalContent>
 
-      <ModalFooter horizontal justify="flex-end" flow={2}>
-        <Button padded onClick={onClose}>
-          {t('app:common.cancel')}
-        </Button>
-        {url ? (
+      {url && (
+        <ModalFooter horizontal justify="flex-end" flow={2}>
           <Button primary padded onClick={() => shell.openExternal(url)}>
             {t('app:operationDetails.viewOperation')}
           </Button>
-        ) : null}
-      </ModalFooter>
+        </ModalFooter>
+      )}
     </ModalBody>
   )
 })

src/components/modals/Send/index.js

@@ -20,7 +20,7 @@ import type { StepProps as DefaultStepProps } from 'components/base/Stepper'
 
 import { getCurrentDevice } from 'reducers/devices'
 import { accountsSelector } from 'reducers/accounts'
-import { closeModal } from 'reducers/modals'
+import { closeModal, openModal } from 'reducers/modals'
 
 import Modal from 'components/base/Modal'
 import Stepper from 'components/base/Stepper'
@@ -38,6 +38,7 @@ type Props = {
   device: ?Device,
   accounts: Account[],
   closeModal: string => void,
+  openModal: (string, any) => void,
   updateAccountWithUpdater: (string, (Account) => Account) => void,
 }
 
@@ -48,7 +49,6 @@ type State<Transaction> = {
   transaction: ?Transaction,
   optimisticOperation: ?Operation,
   isAppOpened: boolean,
-  disabledSteps: number[],
   errorSteps: number[],
   amount: number,
   error: ?Error,
@@ -62,6 +62,7 @@ export type StepProps<Transaction> = DefaultStepProps & {
   error: ?Error,
   optimisticOperation: ?Operation,
   closeModal: void => void,
+  openModal: (string, any) => void,
   isAppOpened: boolean,
   onChangeAccount: (?Account) => void,
   onChangeAppOpened: boolean => void,
@@ -111,6 +112,7 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = {
   closeModal,
+  openModal,
   updateAccountWithUpdater,
 }
 
@@ -123,15 +125,11 @@ const INITIAL_STATE = {
   error: null,
   optimisticOperation: null,
   isAppOpened: false,
-  disabledSteps: [],
   errorSteps: [],
 }
 
 class SendModal extends PureComponent<Props, State<*>> {
   state = INITIAL_STATE
-  STEPS = createSteps({ t: this.props.t })
-  _signTransactionSub = null
-  _isUnmounted = false
 
   componentWillUnmount() {
     if (this._signTransactionSub) {
@@ -139,6 +137,10 @@ class SendModal extends PureComponent<Props, State<*>> {
     }
   }
 
+  STEPS = createSteps({ t: this.props.t })
+  _signTransactionSub = null
+  _isUnmounted = false
+
   handleReset = () => this.setState({ ...INITIAL_STATE })
 
   handleCloseModal = () => this.props.closeModal(MODAL_SEND)
@@ -165,7 +167,14 @@ class SendModal extends PureComponent<Props, State<*>> {
 
   handleChangeAppOpened = (isAppOpened: boolean) => this.setState({ isAppOpened })
   handleChangeTransaction = transaction => this.setState({ transaction })
-  handleRetry = () => this.setState({ error: null, errorSteps: [] })
+  handleRetry = () => {
+    this.setState({
+      error: null,
+      errorSteps: [],
+      optimisticOperation: null,
+      isAppOpened: false,
+    })
+  }
 
   handleTransactionError = (error: Error) => {
     const stepVerificationIndex = this.STEPS.findIndex(step => step.id === 'verification')
@@ -218,12 +227,11 @@ class SendModal extends PureComponent<Props, State<*>> {
   }
 
   render() {
-    const { t, device } = this.props
+    const { t, device, openModal } = this.props
     const {
       stepId,
       account,
       isAppOpened,
-      disabledSteps,
       errorSteps,
       bridge,
       transaction,
@@ -239,6 +247,7 @@ class SendModal extends PureComponent<Props, State<*>> {
       isAppOpened,
       error,
       optimisticOperation,
+      openModal,
       closeModal: this.handleCloseModal,
       onChangeAccount: this.handleChangeAccount,
       onChangeAppOpened: this.handleChangeAppOpened,
@@ -263,7 +272,6 @@ class SendModal extends PureComponent<Props, State<*>> {
             onStepChange={this.handleStepChange}
             onClose={onClose}
             steps={this.STEPS}
-            disabledSteps={disabledSteps}
             errorSteps={errorSteps}
             {...addtionnalProps}
           >

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

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { Fragment } from 'react'
-import { shell } from 'electron'
 import styled from 'styled-components'
 import { getAccountOperationExplorer } from '@ledgerhq/live-common/lib/explorers'
 
+import { MODAL_OPERATION_DETAILS } from 'config/constants'
 import { colors } from 'styles/theme'
 import { multiline } from 'styles/helpers'
 
@@ -55,22 +55,18 @@ export default function StepConfirmation({ t, optimisticOperation, error }: Step
     : error
       ? 'app:send.steps.confirmation.error'
       : 'app:send.steps.confirmation.pending'
+
+  const translatedErrTitle = error ? <TranslatedError error={error} /> || '' : ''
+  const translatedErrDesc = error ? <TranslatedError error={error} field="description" /> || '' : ''
   return (
     <Container>
       <TrackPage category="Send" name="Step4" />
       <span style={{ color: iconColor }}>
         <Icon size={43} />
       </span>
-      <Title>{t(`${tPrefix}.title`)}</Title>
-      <Text style={{ userSelect: 'text' }}>
-        {optimisticOperation ? (
-          multiline(t(`${tPrefix}.text`))
-        ) : error ? (
-          <TranslatedError error={error} />
-        ) : null}
-      </Text>
-      <Text style={{ userSelect: 'text' }}>
-        {optimisticOperation ? optimisticOperation.hash : ''}
+      <Title>{translatedErrTitle || t(`${tPrefix}.title`)}</Title>
+      <Text style={{ userSelect: 'text' }} color="smoke">
+        {optimisticOperation ? multiline(t(`${tPrefix}.text`)) : error ? translatedErrDesc : null}
       </Text>
     </Container>
   )
@@ -83,6 +79,7 @@ export function StepConfirmationFooter({
   onRetry,
   optimisticOperation,
   error,
+  openModal,
   closeModal,
 }: StepProps<*>) {
   const url =
@@ -96,8 +93,13 @@ export function StepConfirmationFooter({
           <Button
             ml={2}
             onClick={() => {
-              shell.openExternal(url)
               closeModal()
+              if (account && optimisticOperation) {
+                openModal(MODAL_OPERATION_DETAILS, {
+                  operationId: optimisticOperation.id,
+                  accountId: account.id,
+                })
+              }
             }}
             primary
           >

static/i18n/en/app.yml

@@ -283,7 +283,7 @@ send:
       success:
         title: Transaction sent
         text: |
-          The transaction has been signed and sent to the network. Your account balance will update once the the transaction is confirmed by the network.
+          The transaction has been signed and sent to the network. Your account balance will update once the blockchain has confirmed the transaction.
         cta: View operation details
       error:
         title: Transaction canceled