From 50d91f998d0dc228c1d5dac7966df89d6c3fe6c4 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 4 Oct 2018 19:26:41 -0700 Subject: [PATCH] Translate method names in the transaction list only when applicable --- app/_locales/en/messages.json | 3 + .../transaction-action.component.test.js | 81 +++++++++++++++---- .../transaction-action.component.js | 10 ++- ui/app/helpers/common.util.js | 5 ++ ui/app/helpers/tests/common.util.test.js | 23 ++++++ ui/app/helpers/transactions.util.js | 2 - ui/app/selectors/confirm-transaction.js | 7 +- 7 files changed, 111 insertions(+), 20 deletions(-) create mode 100644 ui/app/helpers/common.util.js create mode 100644 ui/app/helpers/tests/common.util.test.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index d7431fc2c..f19b6cd4d 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1163,6 +1163,9 @@ "transfer": { "message": "Transfer" }, + "transferFrom": { + "message": "Transfer From" + }, "transfers": { "message": "Transfers" }, 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 index 9352c7b43..b22a9db39 100644 --- a/ui/app/components/transaction-action/tests/transaction-action.component.test.js +++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js @@ -6,14 +6,18 @@ import TransactionAction from '../transaction-action.component' describe('TransactionAction Component', () => { const t = key => key - global.eth = { - getCode: sinon.stub().callsFake(address => { - const code = address === 'approveAddress' ? 'contract' : '0x' - return Promise.resolve(code) - }), - } + 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 = { @@ -69,7 +73,7 @@ describe('TransactionAction Component', () => { assert.equal(wrapper.text(), 'sentEther') }) - it('should render Approved', () => { + it('should render Approved', async () => { const methodData = { data: { name: 'Approve', @@ -97,15 +101,62 @@ describe('TransactionAction Component', () => { }, } - const wrapper = shallow(, { context: { t }}) + const wrapper = shallow( + , + { context: { t } } + ) - assert.equal(wrapper.find('.transaction-action').length, 1) - wrapper.setState({ transactionAction: 'approve' }) - assert.equal(wrapper.text(), 'approve') + 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( + , + { 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 index 1729b878c..85761c089 100644 --- a/ui/app/components/transaction-action/transaction-action.component.js +++ b/ui/app/components/transaction-action/transaction-action.component.js @@ -1,6 +1,8 @@ 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 = { @@ -29,13 +31,17 @@ export default class TransactionAction extends PureComponent { 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) + const action = actionKey + ? this.context.t(actionKey) + : camelCaseToCapitalize(name) + this.setState({ transactionAction: action }) } @@ -44,7 +50,7 @@ export default class TransactionAction extends PureComponent { const { transactionAction } = this.state return ( -
+
{ (done && transactionAction) || '--' }
) diff --git a/ui/app/helpers/common.util.js b/ui/app/helpers/common.util.js new file mode 100644 index 000000000..d4acb9968 --- /dev/null +++ b/ui/app/helpers/common.util.js @@ -0,0 +1,5 @@ +export function camelCaseToCapitalize (str) { + return str + .replace(/([A-Z])/g, ' $1') + .replace(/^./, str => str.toUpperCase()) +} diff --git a/ui/app/helpers/tests/common.util.test.js b/ui/app/helpers/tests/common.util.test.js new file mode 100644 index 000000000..891e19ef5 --- /dev/null +++ b/ui/app/helpers/tests/common.util.test.js @@ -0,0 +1,23 @@ +import * as utils from '../common.util' +import assert from 'assert' + +describe('Common utils', () => { + describe('camelCaseToCapitalize', () => { + it('should return a capitalized string from a camel-cased string', () => { + const tests = [ + { + test: '', + expected: '', + }, + { + test: 'thisIsATest', + expected: 'This Is A Test', + }, + ] + + tests.forEach(({ test, expected }) => { + assert.equal(utils.camelCaseToCapitalize(test), expected) + }) + }) + }) +}) diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js index 8b87bb538..fdad63a96 100644 --- a/ui/app/helpers/transactions.util.js +++ b/ui/app/helpers/transactions.util.js @@ -80,8 +80,6 @@ export async function getTransactionActionKey (transaction, methodData) { return APPROVE_ACTION_KEY case TOKEN_METHOD_TRANSFER_FROM: return TRANSFER_FROM_ACTION_KEY - default: - return name } } else { return SEND_ETHER_ACTION_KEY diff --git a/ui/app/selectors/confirm-transaction.js b/ui/app/selectors/confirm-transaction.js index 6e760c429..86b10bac3 100644 --- a/ui/app/selectors/confirm-transaction.js +++ b/ui/app/selectors/confirm-transaction.js @@ -126,7 +126,8 @@ const TOKEN_PARAM_VALUE = '_value' export const tokenAmountAndToAddressSelector = createSelector( tokenDataParamsSelector, - params => { + tokenDecimalsSelector, + (params, tokenDecimals) => { let toAddress = '' let tokenAmount = 0 @@ -136,6 +137,10 @@ export const tokenAmountAndToAddressSelector = createSelector( toAddress = toParam ? toParam.value : params[0].value const value = valueParam ? Number(valueParam.value) : Number(params[1].value) tokenAmount = roundExponential(value) + + if (tokenDecimals) { + tokenAmount = calcTokenAmount(value, tokenDecimals) + } } return {