do not show amounts for approvals

MetaMask · Jul 21, 2020 · f0837eb · f0837eb
1 parent 7cd609b
commit f0837eb
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -187,11 +187,11 @@
   "alertsSettingsDescription": {
     "message": "Enable or disable each alert"
   },
-  "alertSettingsUnconnectedAccount": {	
-    "message": "Browsing a website with an unconnected account selected"	
-  },	
-  "alertSettingsUnconnectedAccountDescription": {	
-    "message": "This alert is shown in the popup when you are browsing a connected Web3 site, but the currently selected account is not connected."	
+  "alertSettingsUnconnectedAccount": {
+    "message": "Browsing a website with an unconnected account selected"
+  },
+  "alertSettingsUnconnectedAccountDescription": {
+    "message": "This alert is shown in the popup when you are browsing a connected Web3 site, but the currently selected account is not connected."
   },
   "allowOriginSpendToken": {
     "message": "Allow $1 to spend your $2?",
@@ -224,6 +224,10 @@
   "approve": {
     "message": "Approve spend limit"
   },
+  "approveSpendLimit": {
+    "message": "Approve $1 spend limit",
+    "description": "The token symbol that is being approved"
+  },
   "approved": {
     "message": "Approved"
   },

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -1018,8 +1018,8 @@ describe('MetaMask', function () {
         return pendingTxes.length === 1
       }, 10000)
 
-      const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primary-currency'))
-      await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/))
+      const [txtListHeading] = await driver.findElements(By.css('.transaction-list-item .list-item__heading'))
+      await driver.wait(until.elementTextMatches(txtListHeading, /Approve TST spend limit/))
       await driver.clickElement(By.css('.transaction-list-item'))
       await driver.delay(regularDelayMs)
     })
@@ -1104,10 +1104,8 @@ describe('MetaMask', function () {
         return confirmedTxes.length === 3
       }, 10000)
 
-      const txValues = await driver.findElements(By.css('.transaction-list-item__primary-currency'))
-      await driver.wait(until.elementTextMatches(txValues[0], /-5\s*TST/))
       const txStatuses = await driver.findElements(By.css('.list-item__heading'))
-      await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
+      await driver.wait(until.elementTextMatches(txStatuses[0], /Approve TST spend limit/))
     })
   })
 
@@ -1177,8 +1175,8 @@ describe('MetaMask', function () {
         return pendingTxes.length === 1
       }, 10000)
 
-      const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primary-currency'))
-      await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/))
+      const [txtListHeading] = await driver.findElements(By.css('.transaction-list-item .list-item__heading'))
+      await driver.wait(until.elementTextMatches(txtListHeading, /Approve TST spend limit/))
       await driver.clickElement(By.css('.transaction-list-item'))
       await driver.delay(regularDelayMs)
     })
@@ -1204,10 +1202,8 @@ describe('MetaMask', function () {
         return confirmedTxes.length === 5
       }, 10000)
 
-      const txValues = await driver.findElements(By.css('.transaction-list-item__primary-currency'))
-      await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/))
       const txStatuses = await driver.findElements(By.css('.list-item__heading'))
-      await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
+      await driver.wait(until.elementTextMatches(txStatuses[0], /Approve TST spend limit/))
     })
   })
 

diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -15,6 +15,7 @@ import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes'
 import {
   TRANSACTION_CATEGORY_SIGNATURE_REQUEST,
   UNAPPROVED_STATUS,
+  TRANSACTION_CATEGORY_APPROVAL,
   FAILED_STATUS,
   DROPPED_STATUS,
   REJECTED_STATUS,
@@ -55,6 +56,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
 
 
   const isSignatureReq = category === TRANSACTION_CATEGORY_SIGNATURE_REQUEST
+  const isApproval = category === TRANSACTION_CATEGORY_APPROVAL
   const isUnapproved = status === UNAPPROVED_STATUS
 
   const className = classnames('transaction-list-item', {
@@ -137,7 +139,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
             </span>
           </h3>
         )}
-        rightContent={!isSignatureReq && (
+        rightContent={!isSignatureReq && !isApproval && (
           <>
             <h2 className="transaction-list-item__primary-currency">{primaryCurrency}</h2>
             <h3 className="transaction-list-item__secondary-currency">{secondaryCurrency}</h3>

diff --git a/ui/app/hooks/useTransactionDisplayData.js b/ui/app/hooks/useTransactionDisplayData.js
@@ -106,7 +106,7 @@ export function useTransactionDisplayData (transactionGroup) {
     subtitleContainsOrigin = true
   } else if (transactionCategory === TOKEN_METHOD_APPROVE) {
     category = TRANSACTION_CATEGORY_APPROVAL
-    title = t('approve')
+    title = t('approveSpendLimit', [token?.symbol || t('token')])
     subtitle = origin
     subtitleContainsOrigin = true
   } else if (transactionCategory === DEPLOY_CONTRACT_ACTION_KEY || transactionCategory === CONTRACT_INTERACTION_KEY) {