diff options
Diffstat (limited to 'ui/app/components/transaction-action')
3 files changed, 221 insertions, 0 deletions
diff --git a/ui/app/components/transaction-action/index.js b/ui/app/components/transaction-action/index.js new file mode 100644 index 000000000..a6e9097f1 --- /dev/null +++ b/ui/app/components/transaction-action/index.js @@ -0,0 +1 @@ +export { default } from './transaction-action.component' diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/transaction-action/tests/transaction-action.component.test.js new file mode 100644 index 000000000..b22a9db39 --- /dev/null +++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js @@ -0,0 +1,162 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import TransactionAction from '../transaction-action.component' + +describe('TransactionAction Component', () => { + const t = key => key + + + describe('Outgoing transaction', () => { + beforeEach(() => { + global.eth = { + getCode: sinon.stub().callsFake(address => { + const code = address === 'approveAddress' ? 'contract' : '0x' + return Promise.resolve(code) + }), + } + }) + + it('should render -- when methodData is still fetching', () => { + const methodData = { data: {}, done: false, error: null } + const transaction = { + id: 1, + status: 'confirmed', + submittedTime: 1534045442919, + time: 1534045440641, + txParams: { + from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0x96', + to: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706', + value: '0x2386f26fc10000', + }, + } + + const wrapper = shallow(<TransactionAction + methodData={methodData} + transaction={transaction} + className="transaction-action" + />, { context: { t }}) + + assert.equal(wrapper.find('.transaction-action').length, 1) + assert.equal(wrapper.text(), '--') + }) + + it('should render Sent Ether', () => { + const methodData = { data: {}, done: true, error: null } + const transaction = { + id: 1, + status: 'confirmed', + submittedTime: 1534045442919, + time: 1534045440641, + txParams: { + from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0x96', + to: 'sentEtherAddress', + value: '0x2386f26fc10000', + }, + } + + const wrapper = shallow(<TransactionAction + methodData={methodData} + transaction={transaction} + className="transaction-action" + />, { context: { t }}) + + assert.equal(wrapper.find('.transaction-action').length, 1) + wrapper.setState({ transactionAction: 'sentEther' }) + assert.equal(wrapper.text(), 'sentEther') + }) + + it('should render Approved', async () => { + const methodData = { + data: { + name: 'Approve', + params: [ + { type: 'address' }, + { type: 'uint256' }, + ], + }, + done: true, + error: null, + } + const transaction = { + id: 1, + status: 'confirmed', + submittedTime: 1534045442919, + time: 1534045440641, + txParams: { + from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0x96', + to: 'approveAddress', + value: '0x2386f26fc10000', + data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003', + }, + } + + const wrapper = shallow( + <TransactionAction + methodData={methodData} + transaction={transaction} + className="test-class" + />, + { context: { t } } + ) + + assert.ok(wrapper) + assert.equal(wrapper.find('.test-class').length, 1) + await wrapper.instance().getTransactionAction() + assert.equal(wrapper.state('transactionAction'), 'approve') + }) + + it('should render Accept Fulfillment', async () => { + const methodData = { + data: { + name: 'AcceptFulfillment', + params: [ + { type: 'address' }, + { type: 'uint256' }, + ], + }, + done: true, + error: null, + } + const transaction = { + id: 1, + status: 'confirmed', + submittedTime: 1534045442919, + time: 1534045440641, + txParams: { + from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6', + gas: '0x5208', + gasPrice: '0x3b9aca00', + nonce: '0x96', + to: 'approveAddress', + value: '0x2386f26fc10000', + data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003', + }, + } + + const wrapper = shallow( + <TransactionAction + methodData={methodData} + transaction={transaction} + className="test-class" + />, + { context: { t }} + ) + + assert.ok(wrapper) + assert.equal(wrapper.find('.test-class').length, 1) + await wrapper.instance().getTransactionAction() + assert.equal(wrapper.state('transactionAction'), ' Accept Fulfillment') + }) + }) +}) diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js new file mode 100644 index 000000000..1de91cb71 --- /dev/null +++ b/ui/app/components/transaction-action/transaction-action.component.js @@ -0,0 +1,58 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import { getTransactionActionKey } from '../../helpers/transactions.util' +import { camelCaseToCapitalize } from '../../helpers/common.util' + +export default class TransactionAction extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + className: PropTypes.string, + transaction: PropTypes.object, + methodData: PropTypes.object, + } + + state = { + transactionAction: '', + } + + componentDidMount () { + this.getTransactionAction() + } + + componentDidUpdate () { + this.getTransactionAction() + } + + async getTransactionAction () { + const { transactionAction } = this.state + const { transaction, methodData } = this.props + const { data, done } = methodData + const { name = '' } = data + + if (!done || transactionAction) { + return + } + + const actionKey = await getTransactionActionKey(transaction, data) + const action = actionKey + ? this.context.t(actionKey) + : camelCaseToCapitalize(name) + + this.setState({ transactionAction: action }) + } + + render () { + const { className, methodData: { done } } = this.props + const { transactionAction } = this.state + + return ( + <div className={classnames('transaction-action', className)}> + { (done && transactionAction) || '--' } + </div> + ) + } +} |