1 import { BaseNew, FormContainer, FormSection, FieldLabel, JsonField, TextField } from 'features/shared/components'
2 import { DropdownButton, MenuItem } from 'react-bootstrap'
3 import { reduxForm } from 'redux-form'
4 import ActionItem from './FormActionItem'
5 import React from 'react'
6 import styles from './New.scss'
8 class Form extends React.Component {
15 this.submitWithValidation = this.submitWithValidation.bind(this)
16 this.addActionItem = this.addActionItem.bind(this)
17 this.removeActionItem = this.removeActionItem.bind(this)
18 this.toggleDropwdown = this.toggleDropwdown.bind(this)
19 this.closeDropdown = this.closeDropdown.bind(this)
20 this.disableSubmit = this.disableSubmit.bind(this)
24 this.setState({ showDropdown: !this.state.showDropdown })
28 this.setState({ showDropdown: false })
32 this.props.fields.actions.addField({
34 referenceData: '{\n\t\n}'
39 disableSubmit(actions) {
40 return actions.length == 0 & !this.state.showAdvanced
43 removeActionItem(index) {
44 this.props.fields.actions.removeField(index)
47 submitWithValidation(data) {
48 // if (this.props.replicationLag === null || this.props.replicationLag >= lagThreshold) {
49 // return Promise.reject({
50 // _error: `Replication lag must be less than ${lagThreshold} to submit transactions via the dashboard. Please wait for the local core to catch up to the generator.`
54 return new Promise((resolve, reject) => {
55 this.props.submitForm(data)
62 err.data.forEach((error) => {
63 response.actions[error.data.actionIndex] = {type: error}
67 response['_error'] = err
68 return reject(response)
75 fields: { baseTransaction, actions, submitAction },
81 let submitLabel = 'Submit transaction'
82 if (submitAction.value == 'generate') {
83 submitLabel = 'Generate transaction hex'
89 label='New transaction'
90 submitLabel={submitLabel}
91 onSubmit={handleSubmit(this.submitWithValidation)}
92 showSubmitIndicator={true}
93 submitting={submitting}
94 disabled={this.disableSubmit(actions)} >
96 <FormSection title='Actions'>
97 {actions.map((action, index) =>
102 accounts={this.props.accounts}
103 assets={this.props.assets}
104 remove={this.removeActionItem}
107 <div className={`btn-group ${styles.addActionContainer} ${this.state.showDropdown && 'open'}`}>
109 className={`btn btn-default ${styles.addAction}`}
110 id='input-dropdown-addon'
112 onSelect={this.addActionItem}
114 <MenuItem eventKey='issue'>Issue</MenuItem>
115 <MenuItem eventKey='spend_account'>Spend from account</MenuItem>
116 {/*<MenuItem eventKey='spend_account_unspent_output'>Spend unspent output</MenuItem>*/}
117 <MenuItem eventKey='control_account'>Control with account</MenuItem>
118 <MenuItem eventKey='control_receiver'>Control with receiver</MenuItem>
119 {/*<MenuItem eventKey='retire'>Retire</MenuItem>*/}
120 {/*<MenuItem eventKey='set_transaction_reference_data'>Set transaction reference data</MenuItem>*/}
125 {false && !this.state.showAdvanced &&
128 className={styles.showAdvanced}
131 this.setState({showAdvanced: true})
134 Show advanced options
139 {false && this.state.showAdvanced && <FormSection title='Advanced Options'>
142 title='Base transaction'
143 placeholder='Paste transaction hex here...'
144 fieldProps={baseTransaction}
147 <FieldLabel>Transaction Build Type</FieldLabel>
148 <table className={styles.submitTable}>
151 <td><input id='submit_action_submit' type='radio' {...submitAction} value='submit' checked={submitAction.value == 'submit'} /></td>
153 <label htmlFor='submit_action_submit'>Submit transaction to blockchain</label>
155 <label htmlFor='submit_action_submit' className={styles.submitDescription}>
156 This transaction will be signed by the MockHSM and submitted to the blockchain.
161 <td><input id='submit_action_generate' type='radio' {...submitAction} value='generate' checked={submitAction.value == 'generate'} /></td>
163 <label htmlFor='submit_action_generate'>Allow additional actions</label>
165 <label htmlFor='submit_action_generate' className={styles.submitDescription}>
166 These actions will be signed by the MockHSM and returned as a
167 transaction hex string, which should be used as the base
168 transaction in a multi-party swap. This transaction will be
182 const validate = values => {
183 const errors = {actions: {}}
186 let baseTx = values.baseTransaction || ''
187 if (baseTx.trim().match(/[^0-9a-fA-F]/)) {
188 errors.baseTransaction = 'Base transaction must be a hex string.'
193 values.actions.forEach((action, index) => {
194 fieldError = JsonField.validator(values.actions[index].referenceData)
196 errors.actions[index] = {...errors.actions[index], referenceData: fieldError}
203 export default BaseNew.connect(
205 ...BaseNew.mapStateToProps('transaction')(state),
207 BaseNew.mapDispatchToProps('transaction'),
209 form: 'NewTransactionForm',
212 'actions[].accountId',
213 'actions[].accountAlias',
215 'actions[].assetAlias',
217 'actions[].receiver',
218 'actions[].outputId',
219 'actions[].referenceData',
225 submitAction: 'submit',