[WIP] Send funds

src/components/modals/Send/03-step-verification.js

@@ -6,9 +6,11 @@ import uniqueId from 'lodash/uniqueId'
 
 import Box from 'components/base/Box'
 import WarnBox from 'components/WarnBox'
+import DeviceCheckAddress from 'components/DeviceCheckAddress'
 import DeviceConfirm from 'components/DeviceConfirm'
 
-import type { T } from 'types/common'
+import type { Account } from '@ledgerhq/wallet-common/lib/types'
+import type { Device, T } from 'types/common'
 
 const Container = styled(Box).attrs({
   alignItems: 'center',
@@ -27,6 +29,9 @@ const Info = styled(Box).attrs({
 `
 
 type Props = {
+  account: ?Account,
+  device: ?Device,
+  onValidate: Function,
   t: T,
 }
 
@@ -39,6 +44,16 @@ export default (props: Props) => (
         .map(line => <p key={uniqueId()}>{line}</p>)}
     </WarnBox>
     <Info>{props.t('send:steps.verification.body')}</Info>
-    <DeviceConfirm />
+    {// TODO: Actually create a tx
+    // DeviceCheckAddress used as a placeholder in the meantime
+    props.account &&
+      props.device && (
+        <DeviceCheckAddress
+          account={props.account}
+          device={props.device}
+          onCheck={props.onValidate}
+          render={({ isVerified }) => <DeviceConfirm notValid={isVerified === false} />}
+        />
+      )}
   </Container>
 )

src/components/modals/Send/index.js

@@ -37,6 +37,7 @@ type State = {
   fees: number,
   isRBF: boolean,
   recipientAddress: string,
+  txValidated: null | boolean,
   stepIndex: number,
 }
 
@@ -59,6 +60,7 @@ const INITIAL_STATE = {
   fees: 0,
   isRBF: false,
   recipientAddress: '',
+  txValidated: null,
   stepIndex: 0,
 }
 
@@ -136,6 +138,16 @@ class SendModal extends PureComponent<Props, State> {
     })
   }
 
+  handleValidate = isValidated => {
+    this.setState({
+      txValidated: isValidated,
+    })
+
+    if (isValidated === true) {
+      this.handleNextStep()
+    }
+  }
+
   createChangeHandler = key => value => {
     const patch = { [key]: value }
     // ensure max is always restecped when changing fees
@@ -158,7 +170,7 @@ class SendModal extends PureComponent<Props, State> {
 
   renderStep = () => {
     const { t } = this.props
-    const { stepIndex, amount, deviceSelected, ...otherState } = this.state
+    const { stepIndex, deviceSelected, txValidated, ...otherState } = this.state
     const step = this._steps[stepIndex]
     if (!step) {
       return null
@@ -170,7 +182,6 @@ class SendModal extends PureComponent<Props, State> {
     const stepProps = {
       ...otherState,
       t,
-      amount,
       account: this._account,
       ...props(stepIndex === 1, {
         accountName: this._account ? this._account.name : undefined,
@@ -178,9 +189,13 @@ class SendModal extends PureComponent<Props, State> {
         onChangeDevice: this.handleChangeDevice,
         onStatusChange: this.handleChangeStatus,
       }),
+      ...props(stepIndex === 2, {
+        device: deviceSelected,
+        onValidate: this.handleValidate,
+      }),
     }
 
-    return <Comp onChange={this.createChangeHandler} {...stepProps} {...this.props} />
+    return <Comp onChange={this.createChangeHandler} {...stepProps} />
   }
 
   render() {