Refactor transactions list views. Add redesign components

4 files changed, 98 insertions, 19 deletions

diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index 3d0cb57e7..04978b48f 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -7,9 +7,6 @@ import BigNumber from 'bignumber.js'
 
 abiDecoder.addABI(abi)
 
-import MethodRegistry from 'eth-method-registry'
-const registry = new MethodRegistry({ provider: global.ethereumProvider })
-
 import {
   conversionUtil,
   addCurrencies,
@@ -23,18 +20,6 @@ export function getTokenData (data = {}) {
   return abiDecoder.decodeMethod(data)
 }
 
-export async function getMethodData (data = {}) {
-  const prefixedData = ethUtil.addHexPrefix(data)
-  const fourBytePrefix = prefixedData.slice(0, 10)
-  const sig = await registry.lookup(fourBytePrefix)
-  const parsedResult = registry.parse(sig)
-
-  return {
-    name: parsedResult.name,
-    params: parsedResult.args,
-  }
-}
-
 export function increaseLastGasPrice (lastGasPrice) {
   return ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
     multiplicandBase: 16,
@@ -76,7 +61,7 @@ export function addFiat (...args) {
   })
 }
 
-export function getTransactionAmount ({
+export function getValueFromWeiHex ({
   value,
   toCurrency,
   conversionRate,
diff --git a/ui/app/helpers/confirm-transaction/util.test.js b/ui/app/helpers/confirm-transaction/util.test.js
index a9c8fae34..4c1a3e16b 100644
--- a/ui/app/helpers/confirm-transaction/util.test.js
+++ b/ui/app/helpers/confirm-transaction/util.test.js
@@ -92,9 +92,9 @@ describe('Confirm Transaction utils', () => {
     })
   })
 
-  describe('getTransactionAmount', () => {
+  describe('getValueFromWeiHex', () => {
     it('should get the transaction amount in ETH', () => {
-      const ethTransactionAmount = utils.getTransactionAmount({
+      const ethTransactionAmount = utils.getValueFromWeiHex({
         value: '0xde0b6b3a7640000', toCurrency: 'ETH', conversionRate: 468.58, numberOfDecimals: 6,
       })
 
@@ -102,7 +102,7 @@ describe('Confirm Transaction utils', () => {
     })
 
     it('should get the transaction amount in fiat', () => {
-      const fiatTransactionAmount = utils.getTransactionAmount({
+      const fiatTransactionAmount = utils.getValueFromWeiHex({
         value: '0xde0b6b3a7640000', toCurrency: 'usd', conversionRate: 468.58, numberOfDecimals: 2,
       })
 
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
new file mode 100644
index 000000000..1dec216fa
--- /dev/null
+++ b/ui/app/helpers/conversions.util.js
@@ -0,0 +1,37 @@
+import { conversionUtil } from '../conversion-util'
+
+export function hexToDecimal (hexValue) {
+  return conversionUtil(hexValue, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+}
+
+export function getEthFromWeiHex ({
+  value,
+  conversionRate,
+}) {
+  return getValueFromWeiHex({
+    value,
+    conversionRate,
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+  })
+}
+
+export function getValueFromWeiHex ({
+  value,
+  toCurrency,
+  conversionRate,
+  numberOfDecimals,
+}) {
+  return conversionUtil(value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency,
+    numberOfDecimals,
+    fromDenomination: 'WEI',
+    conversionRate,
+  })
+}
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
new file mode 100644
index 000000000..04cef150f
--- /dev/null
+++ b/ui/app/helpers/transactions.util.js
@@ -0,0 +1,57 @@
+import ethUtil from 'ethereumjs-util'
+import MethodRegistry from 'eth-method-registry'
+const registry = new MethodRegistry({ provider: global.ethereumProvider })
+
+import {
+  TOKEN_METHOD_TRANSFER,
+  TOKEN_METHOD_APPROVE,
+  TOKEN_METHOD_TRANSFER_FROM,
+  SEND_ETHER_ACTION_KEY,
+  DEPLOY_CONTRACT_ACTION_KEY,
+  APPROVE_ACTION_KEY,
+  SEND_TOKEN_ACTION_KEY,
+  TRANSFER_FROM_ACTION_KEY,
+} from '../constants/transactions'
+
+export function isConfirmDeployContract (txData = {}) {
+  const { txParams = {} } = txData
+  return !txParams.to
+}
+
+export function getTransactionActionKey (transaction, methodData) {
+  const { txParams: { data } = {} } = transaction
+
+  if (isConfirmDeployContract(transaction)) {
+    return DEPLOY_CONTRACT_ACTION_KEY
+  }
+
+  if (data) {
+    const { name } = methodData
+    const methodName = name && name.toLowerCase()
+
+    switch (methodName) {
+      case TOKEN_METHOD_TRANSFER:
+        return SEND_TOKEN_ACTION_KEY
+      case TOKEN_METHOD_APPROVE:
+        return APPROVE_ACTION_KEY
+      case TOKEN_METHOD_TRANSFER_FROM:
+        return TRANSFER_FROM_ACTION_KEY
+      default:
+        return name
+    }
+  } else {
+    return SEND_ETHER_ACTION_KEY
+  }
+}
+
+export async function getMethodData (data = {}) {
+  const prefixedData = ethUtil.addHexPrefix(data)
+  const fourBytePrefix = prefixedData.slice(0, 10)
+  const sig = await registry.lookup(fourBytePrefix)
+  const parsedResult = registry.parse(sig)
+
+  return {
+    name: parsedResult.name,
+    params: parsedResult.args,
+  }
+}