lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix many bugs in Send flow

master
Gaëtan Renaudeau 7 years ago
parent
5b33845a7f
commit
cba5a9e2d4
14 changed files with 416 additions and 300 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      src/bridge/EthereumJSBridge.js
  2. 26
      src/bridge/LibcoreBridge.js
  3. 141
      src/bridge/RippleJSBridge.js
  4. 6
      src/bridge/UnsupportedBridge.js
  5. 9
      src/bridge/makeMockBridge.js
  6. 3
      src/bridge/types.js
  7. 62
      src/commands/libcoreSignAndBroadcast.js
  8. 42
      src/components/DeviceSignTransaction.js
  9. 36
      src/components/modals/Send/03-step-verification.js
  10. 13
      src/components/modals/Send/04-step-confirmation.js
  11. 17
      src/components/modals/Send/ConfirmationFooter.js
  12. 98
      src/components/modals/Send/SendModalBody.js
  13. 16
      src/components/modals/Send/index.js
  14. 2
      static/i18n/en/send.yml

93
src/bridge/EthereumJSBridge.js
View File

@ -1,4 +1,5 @@
// @flow
import { Observable } from 'rxjs'
import React from 'react'
import FeesField from 'components/FeesField/EthereumKind'
import AdvancedOptions from 'components/AdvancedOptions/EthereumKind'
@ -93,6 +94,49 @@ function mergeOps(existing: Operation[], newFetched: Operation[]) {
return uniqBy(all.sort((a, b) => b.date - a.date), 'id')
}
const signAndBroadcast = async ({
a,
t,
deviceId,
isCancelled,
onSigned,
onOperationBroadcasted,
}) => {
const api = apiForCurrency(a.currency)
const nonce = await api.getAccountNonce(a.freshAddress)
const transaction = await signTransactionCommand
.send({
currencyId: a.currency.id,
devicePath: deviceId,
path: a.freshAddressPath,
transaction: { ...t, nonce },
})
.toPromise()
if (!isCancelled()) {
onSigned()
const hash = await api.broadcastTransaction(transaction)
onOperationBroadcasted({
id: `${a.id}-${hash}-OUT`,
hash,
type: 'OUT',
value: t.amount,
fee: t.gasPrice * t.gasLimit,
blockHeight: null,
blockHash: null,
accountId: a.id,
senders: [a.freshAddress],
recipients: [t.recipient],
transactionSequenceNumber: nonce,
date: new Date(),
})
}
}
const SAFE_REORG_THRESHOLD = 80
const fetchCurrentBlock = (perCurrencyId => currency => {
@ -324,37 +368,28 @@ const EthereumBridge: WalletBridge<Transaction> = {
getTotalSpent: (a, t) => Promise.resolve(t.amount + t.gasPrice * t.gasLimit),
getMaxAmount: (a, t) => Promise.resolve(a.balance - t.gasPrice * t.gasLimit),
signAndBroadcast: async (a, t, deviceId) => {
const api = apiForCurrency(a.currency)
const nonce = await api.getAccountNonce(a.freshAddress)
const transaction = await signTransactionCommand
.send({
currencyId: a.currency.id,
devicePath: deviceId,
path: a.freshAddressPath,
transaction: { ...t, nonce },
})
.toPromise()
const hash = await api.broadcastTransaction(transaction)
return {
id: `${a.id}-${hash}-OUT`,
hash,
type: 'OUT',
value: t.amount,
fee: t.gasPrice * t.gasLimit,
blockHeight: null,
blockHash: null,
accountId: a.id,
senders: [a.freshAddress],
recipients: [t.recipient],
transactionSequenceNumber: nonce,
date: new Date(),
signAndBroadcast: (a, t, deviceId) =>
Observable.create(o => {
let cancelled = false
const isCancelled = () => cancelled
const onSigned = () => {
o.next({ type: 'signed' })
}
const onOperationBroadcasted = operation => {
o.next({ type: 'broadcasted', operation })
}
signAndBroadcast({ a, t, deviceId, isCancelled, onSigned, onOperationBroadcasted }).then(
() => {
o.complete()
},
e => {
o.error(e)
},
)
return () => {
cancelled = true
}
}),
addPendingOperation: (account, operation) => ({
...account,

26
src/bridge/LibcoreBridge.js
View File

@ -17,6 +17,9 @@ type Transaction = {
recipient: string,
}
const decodeOperation = (encodedAccount, rawOp) =>
decodeAccount({ ...encodedAccount, operations: [rawOp] }).operations[0]
const EditFees = ({ account, onChange, value }: EditProps<Transaction>) => (
<FeesBitcoinKind
onChange={feePerByte => {
@ -135,20 +138,27 @@ const LibcoreBridge: WalletBridge<Transaction> = {
getMaxAmount: (a, _t) => Promise.resolve(a.balance), // FIXME
signAndBroadcast: async (account, transaction, deviceId) => {
signAndBroadcast: (account, transaction, deviceId) => {
const encodedAccount = encodeAccount(account)
const rawOp = await libcoreSignAndBroadcast
return libcoreSignAndBroadcast
.send({
account: encodedAccount,
transaction,
deviceId,
})
.toPromise()
// quick HACK
const [op] = decodeAccount({ ...encodedAccount, operations: [rawOp] }).operations
return op
.pipe(
map(e => {
switch (e.type) {
case 'broadcasted':
return {
type: 'broadcasted',
operation: decodeOperation(encodedAccount, e.operation),
}
default:
return e
}
}),
)
},
addPendingOperation: (account, operation) => ({

141
src/bridge/RippleJSBridge.js
View File

@ -1,4 +1,5 @@
// @flow
import { Observable } from 'rxjs'
import React from 'react'
import bs58check from 'ripple-bs58check'
import { computeBinaryTransactionHash } from 'ripple-hashes'
@ -43,6 +44,70 @@ const EditAdvancedOptions = ({ onChange, value }: EditProps<Transaction>) => (
/>
)
async function signAndBroadcast({ a, t, deviceId, isCancelled, onSigned, onOperationBroadcasted }) {
const api = apiForCurrency(a.currency)
try {
await api.connect()
const amount = formatAPICurrencyXRP(t.amount)
const payment = {
source: {
address: a.freshAddress,
amount,
},
destination: {
address: t.recipient,
minAmount: amount,
tag: t.tag,
},
}
const instruction = {
fee: formatAPICurrencyXRP(t.fee).value,
}
const prepared = await api.preparePayment(a.freshAddress, payment, instruction)
const transaction = await signTransaction
.send({
currencyId: a.currency.id,
devicePath: deviceId,
path: a.freshAddressPath,
transaction: JSON.parse(prepared.txJSON),
})
.toPromise()
if (!isCancelled()) {
onSigned()
const submittedPayment = await api.submit(transaction)
if (submittedPayment.resultCode !== 'tesSUCCESS') {
throw new Error(submittedPayment.resultMessage)
}
const hash = computeBinaryTransactionHash(transaction)
onOperationBroadcasted({
id: `${a.id}-${hash}-OUT`,
hash,
accountId: a.id,
type: 'OUT',
value: t.amount,
fee: t.fee,
blockHash: null,
blockHeight: null,
senders: [a.freshAddress],
recipients: [t.recipient],
date: new Date(),
// we probably can't get it so it's a predictive value
transactionSequenceNumber:
(a.operations.length > 0 ? a.operations[0].transactionSequenceNumber : 0) +
a.pendingOperations.length,
})
}
} finally {
api.disconnect()
}
}
function isRecipientValid(currency, recipient) {
try {
bs58check.decode(recipient)
@ -394,66 +459,28 @@ const RippleJSBridge: WalletBridge<Transaction> = {
getMaxAmount: (a, t) => Promise.resolve(a.balance - t.fee),
signAndBroadcast: async (a, t, deviceId) => {
const api = apiForCurrency(a.currency)
try {
await api.connect()
const amount = formatAPICurrencyXRP(t.amount)
const payment = {
source: {
address: a.freshAddress,
amount,
},
destination: {
address: t.recipient,
minAmount: amount,
tag: t.tag,
},
}
const instruction = {
fee: formatAPICurrencyXRP(t.fee).value,
}
const prepared = await api.preparePayment(a.freshAddress, payment, instruction)
const transaction = await signTransaction
.send({
currencyId: a.currency.id,
devicePath: deviceId,
path: a.freshAddressPath,
transaction: JSON.parse(prepared.txJSON),
})
.toPromise()
const submittedPayment = await api.submit(transaction)
if (submittedPayment.resultCode !== 'tesSUCCESS') {
throw new Error(submittedPayment.resultMessage)
}
const hash = computeBinaryTransactionHash(transaction)
return {
id: `${a.id}-${hash}-OUT`,
hash,
accountId: a.id,
type: 'OUT',
value: t.amount,
fee: t.fee,
blockHash: null,
blockHeight: null,
senders: [a.freshAddress],
recipients: [t.recipient],
date: new Date(),
// we probably can't get it so it's a predictive value
transactionSequenceNumber:
(a.operations.length > 0 ? a.operations[0].transactionSequenceNumber : 0) +
a.pendingOperations.length,
signAndBroadcast: (a, t, deviceId) =>
Observable.create(o => {
let cancelled = false
const isCancelled = () => cancelled
const onSigned = () => {
o.next({ type: 'signed' })
}
} finally {
api.disconnect()
const onOperationBroadcasted = operation => {
o.next({ type: 'broadcasted', operation })
}
signAndBroadcast({ a, t, deviceId, isCancelled, onSigned, onOperationBroadcasted }).then(
() => {
o.complete()
},
e => {
o.error(e)
},
)
return () => {
cancelled = true
}
}),
addPendingOperation: (account, operation) => ({
...account,

6
src/bridge/UnsupportedBridge.js
View File

@ -1,4 +1,5 @@
// @flow
import { Observable } from 'rxjs'
import type { WalletBridge } from './types'
const genericError = new Error('UnsupportedBridge')
@ -36,7 +37,10 @@ const UnsupportedBridge: WalletBridge<*> = {
getMaxAmount: () => Promise.resolve(0),
signAndBroadcast: () => Promise.reject(genericError),
signAndBroadcast: () =>
Observable.create(o => {
o.error(genericError)
}),
}
export default UnsupportedBridge

9
src/bridge/makeMockBridge.js
View File

@ -1,4 +1,5 @@
// @flow
import { Observable } from 'rxjs'
import {
genAccount,
genAddingOperationsInAccount,
@ -149,7 +150,8 @@ function makeMockBridge(opts?: Opts): WalletBridge<*> {
getMaxAmount,
signAndBroadcast: async (account, t) => {
signAndBroadcast: (account, t) =>
Observable.create(o => {
const rng = new Prando()
const op = genOperation(account, account.operations, account.currency, rng)
op.type = 'OUT'
@ -161,8 +163,9 @@ function makeMockBridge(opts?: Opts): WalletBridge<*> {
op.blockHeight = account.blockHeight
op.date = new Date()
broadcasted[account.id] = (broadcasted[account.id] || []).concat(op)
return { ...op }
},
o.next({ type: 'signed' })
o.next({ type: 'broadcasted', operation: { ...op } })
}),
}
}

3
src/bridge/types.js
View File

@ -1,5 +1,6 @@
// @flow
import type { Observable } from 'rxjs'
import type { Account, Operation, Currency } from '@ledgerhq/live-common/lib/types'
// a WalletBridge is implemented on renderer side.
@ -104,7 +105,7 @@ export interface WalletBridge<Transaction> {
account: Account,
transaction: Transaction,
deviceId: DeviceId,
): Promise<Operation>;
): Observable<{ type: 'signed' } | { type: 'broadcasted', operation: Operation }>;
// Implement an optimistic response for signAndBroadcast.
// you likely should add the operation in account.pendingOperations but maybe you want to clean it (because maybe some are replaced / cancelled by this one?)

62
src/commands/libcoreSignAndBroadcast.js
View File

@ -2,9 +2,8 @@
import type { AccountRaw, OperationRaw } from '@ledgerhq/live-common/lib/types'
import Btc from '@ledgerhq/hw-app-btc'
import { fromPromise } from 'rxjs/observable/fromPromise'
import { Observable } from 'rxjs'
import { getCryptoCurrencyById } from '@ledgerhq/live-common/lib/helpers/currencies'
import type Transport from '@ledgerhq/hw-transport'
import withLibcore from 'helpers/withLibcore'
import { createCommand, Command } from 'helpers/ipc'
@ -23,24 +22,37 @@ type Input = {
deviceId: string,
}
type Result = $Exact<OperationRaw>
type Result = { type: 'signed' } | { type: 'broadcasted', operation: OperationRaw }
const cmd: Command<Input, Result> = createCommand(
'libcoreSignAndBroadcast',
({ account, transaction, deviceId }) =>
fromPromise(
withDevice(deviceId)(transport =>
Observable.create(o => {
let unsubscribed = false
const isCancelled = () => unsubscribed
withLibcore(core =>
doSignAndBroadcast({
account,
transaction,
deviceId,
core,
transport,
isCancelled,
onSigned: () => {
o.next({ type: 'signed' })
},
onOperationBroadcasted: operation => {
o.next({
type: 'broadcasted',
operation,
})
},
}),
).then(() => o.complete(), e => o.error(e))
return () => {
unsubscribed = true
}
}),
),
),
),
)
export async function doSignAndBroadcast({
@ -48,14 +60,21 @@ export async function doSignAndBroadcast({
transaction,
deviceId,
core,
transport,
isCancelled,
onSigned,
onOperationBroadcasted,
}: {
account: AccountRaw,
transaction: BitcoinLikeTransaction,
deviceId: string,
core: *,
transport: Transport<*>,
}) {
isCancelled: () => boolean,
onSigned: () => void,
onOperationBroadcasted: (optimisticOp: $Exact<OperationRaw>) => void,
}): Promise<void> {
let njsAccount
const signedTransaction: ?string = await withDevice(deviceId)(async transport => {
const hwApp = new Btc(transport)
const WALLET_IDENTIFIER = await getWalletIdentifier({
@ -66,7 +85,9 @@ export async function doSignAndBroadcast({
})
const njsWallet = await core.getWallet(WALLET_IDENTIFIER)
const njsAccount = await njsWallet.getAccount(account.index)
if (isCancelled()) return null
njsAccount = await njsWallet.getAccount(account.index)
if (isCancelled()) return null
const bitcoinLikeAccount = njsAccount.asBitcoinLikeAccount()
const njsWalletCurrency = njsWallet.getCurrency()
const amount = core.createAmount(njsWalletCurrency, transaction.amount)
@ -81,6 +102,7 @@ export async function doSignAndBroadcast({
transactionBuilder.setFeesPerByte(fees)
const builded = await transactionBuilder.build()
if (isCancelled()) return null
const sigHashType = core.helpers.bytesToHex(
njsWalletCurrency.bitcoinLikeNetworkParameters.SigHash,
)
@ -89,7 +111,8 @@ export async function doSignAndBroadcast({
// TODO: const timestampDelay = njsWalletCurrency.bitcoinLikeNetworkParameters.TimestampDelay
const currency = getCryptoCurrencyById(account.currencyId)
const signedTransaction = await core.signTransaction({
return core.signTransaction({
hwApp,
transaction: builded,
sigHashType: parseInt(sigHashType, 16).toString(),
@ -97,11 +120,14 @@ export async function doSignAndBroadcast({
isSegwit: account.isSegwit,
hasTimestamp,
})
})
const txHash = await njsAccount.asBitcoinLikeAccount().broadcastRawTransaction(signedTransaction)
if (!signedTransaction || isCancelled() || !njsAccount) return
onSigned()
// optimistic operation
return {
const txHash = await njsAccount.asBitcoinLikeAccount().broadcastRawTransaction(signedTransaction)
// NB we don't check isCancelled() because the broadcast is not cancellable now!
onOperationBroadcasted({
id: txHash,
hash: txHash,
type: 'OUT',
@ -113,7 +139,7 @@ export async function doSignAndBroadcast({
recipients: [transaction.recipient],
accountId: account.id,
date: new Date().toISOString(),
}
})
}
export default cmd

42
src/components/DeviceSignTransaction.js
View File

@ -1,42 +0,0 @@
// @flow
import { PureComponent } from 'react'
import type { Account, Operation } from '@ledgerhq/live-common/lib/types'
import type { Device } from 'types/common'
import type { WalletBridge } from 'bridge/types'
type Props = {
children: *,
onOperationBroadcasted: (op: Operation) => void,
onError: Error => void,
device: Device,
account: Account,
bridge: WalletBridge<*>,
transaction: *,
}
class DeviceSignTransaction extends PureComponent<Props> {
componentDidMount() {
this.sign()
}
componentWillUnmount() {
this.unmount = true
}
unmount = false
sign = async () => {
const { device, account, transaction, bridge, onOperationBroadcasted, onError } = this.props
try {
const optimisticOperation = await bridge.signAndBroadcast(account, transaction, device.path)
onOperationBroadcasted(optimisticOperation)
} catch (error) {
onError(error)
}
}
render() {
return this.props.children
}
}
export default DeviceSignTransaction

36
src/components/modals/Send/03-step-verification.js
View File

@ -6,12 +6,9 @@ import styled from 'styled-components'
import Box from 'components/base/Box'
import WarnBox from 'components/WarnBox'
import { multiline } from 'styles/helpers'
import DeviceSignTransaction from 'components/DeviceSignTransaction'
import DeviceConfirm from 'components/DeviceConfirm'
import type { WalletBridge } from 'bridge/types'
import type { Account, Operation } from '@ledgerhq/live-common/lib/types'
import type { Device, T } from 'types/common'
import type { T } from 'types/common'
const Container = styled(Box).attrs({
alignItems: 'center',
@ -30,43 +27,14 @@ const Info = styled(Box).attrs({
`
type Props = {
account: ?Account,
device: ?Device,
bridge: ?WalletBridge<*>,
transaction: *,
onOperationBroadcasted: (op: Operation) => void,
onError: (e: Error) => void,
hasError: boolean,
t: T,
}
export default ({
account,
device,
bridge,
transaction,
onOperationBroadcasted,
t,
onError,
hasError,
}: Props) => (
export default ({ t, hasError }: Props) => (
<Container>
<WarnBox>{multiline(t('send:steps.verification.warning'))}</WarnBox>
<Info>{t('send:steps.verification.body')}</Info>
{account &&
bridge &&
transaction &&
device && (
<DeviceSignTransaction
account={account}
device={device}
transaction={transaction}
bridge={bridge}
onOperationBroadcasted={onOperationBroadcasted}
onError={onError}
>
<DeviceConfirm error={hasError} />
</DeviceSignTransaction>
)}
</Container>
)

13
src/components/modals/Send/04-step-confirmation.js
View File

@ -3,6 +3,7 @@ import React from 'react'
import styled from 'styled-components'
import type { Operation } from '@ledgerhq/live-common/lib/types'
import Spinner from 'components/base/Spinner'
import IconCheckCircle from 'icons/CheckCircle'
import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
import Box from 'components/base/Box'
@ -45,11 +46,17 @@ type Props = {
function StepConfirmation(props: Props) {
const { t, optimisticOperation, error } = props
const Icon = optimisticOperation ? IconCheckCircle : IconExclamationCircleThin
const iconColor = optimisticOperation ? colors.positiveGreen : colors.alertRed
const Icon = optimisticOperation ? IconCheckCircle : error ? IconExclamationCircleThin : Spinner
const iconColor = optimisticOperation
? colors.positiveGreen
: error
? colors.alertRed
: colors.grey
const tPrefix = optimisticOperation
? 'send:steps.confirmation.success'
: 'send:steps.confirmation.error'
: error
? 'send:steps.confirmation.error'
: 'send:steps.confirmation.pending'
return (
<Container>

17
src/components/modals/Send/ConfirmationFooter.js
View File

@ -9,37 +9,42 @@ import type { T } from 'types/common'
export default ({
t,
error,
account,
optimisticOperation,
onClose,
onGoToFirstStep,
}: {
t: T,
error: ?Error,
account: ?Account,
optimisticOperation: ?Operation,
onClose: () => void,
onGoToFirstStep: () => void,
}) => (
}) => {
const url =
optimisticOperation && account && getAccountOperationExplorer(account, optimisticOperation)
return (
<ModalFooter horizontal alignItems="center" justifyContent="flex-end" flow={2}>
<Button onClick={onClose}>{t('common:close')}</Button>
{optimisticOperation ? (
// TODO: actually go to operations details
url ? (
<Button
onClick={() => {
const url = account && getAccountOperationExplorer(account, optimisticOperation)
if (url) {
shell.openExternal(url)
}
onClose()
}}
primary
>
{t('send:steps.confirmation.success.cta')}
</Button>
) : (
) : null
) : error ? (
<Button onClick={onGoToFirstStep} primary>
{t('send:steps.confirmation.error.cta')}
</Button>
)}
) : null}
</ModalFooter>
)
}

98
src/components/modals/Send/SendModalBody.js
View File

@ -1,5 +1,6 @@
// @flow
import invariant from 'invariant'
import React, { PureComponent } from 'react'
import { translate } from 'react-i18next'
import { connect } from 'react-redux'
@ -27,6 +28,8 @@ import StepAmount from './01-step-amount'
import StepVerification from './03-step-verification'
import StepConfirmation from './04-step-confirmation'
const noop = () => {}
type Props = {
initialAccount: ?Account,
onClose: () => void,
@ -48,7 +51,9 @@ type State<T> = {
type Step = {
label: string,
canNext?: (State<*>) => boolean,
canNext: (State<*>) => boolean,
canPrev: (State<*>) => boolean,
canClose: (State<*>) => boolean,
prevStep?: number,
}
@ -81,6 +86,8 @@ class SendModalBody extends PureComponent<Props, State<*>> {
this.steps = [
{
label: t('send:steps.amount.title'),
canClose: () => true,
canPrev: () => false,
canNext: ({ bridge, account, transaction }) =>
bridge && account && transaction
? bridge.isValidTransaction(account, transaction)
@ -88,28 +95,83 @@ class SendModalBody extends PureComponent<Props, State<*>> {
},
{
label: t('send:steps.connectDevice.title'),
canClose: () => true,
canNext: ({ deviceSelected, appStatus }) =>
deviceSelected !== null && appStatus === 'success',
prevStep: 0,
canPrev: () => true,
},
{
label: t('send:steps.verification.title'),
canClose: ({ error }) => !!error,
canNext: () => true,
canPrev: ({ error }) => !!error,
prevStep: 1,
},
{
label: t('send:steps.confirmation.title'),
prevStep: 0,
canClose: () => true,
canPrev: () => true,
canNext: () => false,
},
]
}
componentWillUnmount() {
const { signTransactionSub } = this
if (signTransactionSub) {
signTransactionSub.unsubscribe()
}
}
signTransactionSub: *
signTransaction = async () => {
const { deviceSelected, account, transaction, bridge } = this.state
invariant(
deviceSelected && account && transaction && bridge,
'signTransaction invalid conditions',
)
this.signTransactionSub = bridge
.signAndBroadcast(account, transaction, deviceSelected.path)
.subscribe({
next: e => {
switch (e.type) {
case 'signed': {
this.onSigned()
break
}
case 'broadcasted': {
this.onOperationBroadcasted(e.operation)
break
}
default:
}
},
error: error => {
this.onOperationError(error)
},
})
}
onNextStep = () =>
this.setState(({ stepIndex }) => {
this.setState(state => {
let { stepIndex, error } = state
if (stepIndex >= this.steps.length - 1) {
return null
}
return { stepIndex: stepIndex + 1 }
if (!this.steps[stepIndex].canNext(state)) {
console.warn('tried to next step without a valid state!', state, stepIndex)
return null
}
stepIndex++
if (stepIndex < 2) {
error = null
} else if (stepIndex === 2) {
this.signTransaction()
}
return { stepIndex, error }
})
onChangeDevice = (deviceSelected: ?Device) => {
@ -133,8 +195,14 @@ class SendModalBody extends PureComponent<Props, State<*>> {
}
}
onSigned = () => {
this.setState({
stepIndex: 3,
})
}
onOperationBroadcasted = (optimisticOperation: Operation) => {
const { stepIndex, account, bridge } = this.state
const { account, bridge } = this.state
if (!account || !bridge) return
const { addPendingOperation } = bridge
if (addPendingOperation) {
@ -144,7 +212,7 @@ class SendModalBody extends PureComponent<Props, State<*>> {
}
this.setState({
optimisticOperation,
stepIndex: stepIndex + 1,
stepIndex: 3,
error: null,
})
}
@ -179,7 +247,7 @@ class SendModalBody extends PureComponent<Props, State<*>> {
steps: Step[]
render() {
const { t, onClose } = this.props
const { t } = this.props
const {
stepIndex,
account,
@ -192,8 +260,13 @@ class SendModalBody extends PureComponent<Props, State<*>> {
const step = this.steps[stepIndex]
if (!step) return null
const canNext = step.canNext && step.canNext(this.state)
const canPrev = 'prevStep' in step
const canClose = step.canClose(this.state)
const canNext = step.canNext(this.state)
const canPrev = step.canPrev(this.state)
let { onClose } = this.props
if (!canClose) {
onClose = noop
}
return (
<ModalBody onClose={onClose}>
@ -242,6 +315,7 @@ class SendModalBody extends PureComponent<Props, State<*>> {
{stepIndex === 3 ? (
<ConfirmationFooter
t={t}
error={error}
account={account}
optimisticOperation={optimisticOperation}
onClose={onClose}
@ -268,4 +342,10 @@ class SendModalBody extends PureComponent<Props, State<*>> {
}
}
export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(SendModalBody)
export default compose(
connect(
mapStateToProps,
mapDispatchToProps,
),
translate(),
)(SendModalBody)

16
src/components/modals/Send/index.js
View File

@ -4,24 +4,14 @@ import { MODAL_SEND } from 'config/constants'
import Modal from 'components/base/Modal'
import SendModalBody from './SendModalBody'
class SendModal extends PureComponent<{}, { resetId: number }> {
state = { resetId: 0 }
handleReset = () => {
this.setState(({ resetId }) => ({ resetId: resetId + 1 }))
}
class SendModal extends PureComponent<{}> {
render() {
const { resetId } = this.state
return (
<Modal
name={MODAL_SEND}
onHide={this.handleReset}
preventBackdropClick
render={({ data, onClose }) => (
<SendModalBody
key={resetId}
{...this.props}
initialAccount={data && data.account}
onClose={onClose}
/>
<SendModalBody {...this.props} initialAccount={data && data.account} onClose={onClose} />
)}
/>
)

2
static/i18n/en/send.yml
View File

@ -31,3 +31,5 @@ steps:
error:
title: Transaction error
cta: Retry operation
pending:
title: Broadcasting transaction...

Write Preview
Loading…
Cancel
Save