Overflow primaryCurrency in tx-list-item & use primaryCurrency for tx breakdown details. (#9539)

* Set result of calcTokenAmount to base 10 string in useTokenDisplayValue

* Use primaryCurrency for amount in transaction breakdownd details

* Hidden overflow and text overflow ellipsis on long primary currency in transaction-list-item

* Empty prefix for token approvals

* Conditional render primaryCurrency title in tx breakdown to `Spend limit amount` when tx is a token approve.

* Add title to primaryCurrency in tx list item to show full amount on hover

* Update ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js

DRY title conditional rendering.

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

app/_locales/en/messages.json

@@ -1498,6 +1498,9 @@
   "speedUpTransaction": {
     "message": "Speed up this transaction"
   },
+  "spendLimitAmount": {
+    "message": "Spend limit amount"
+  },
   "spendLimitInsufficient": {
     "message": "Spend limit insufficient"
   },

ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js

@@ -17,9 +17,10 @@ export default class TransactionBreakdown extends PureComponent {
     nativeCurrency: PropTypes.string,
     showFiat: PropTypes.bool,
     nonce: PropTypes.string,
+    primaryCurrency: PropTypes.string,
+    isTokenApprove: PropTypes.bool,
     gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
@@ -30,7 +31,7 @@ export default class TransactionBreakdown extends PureComponent {
 
   render () {
     const { t } = this.context
-    const { gas, gasPrice, value, className, nonce, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
+    const { gas, gasPrice, primaryCurrency, className, nonce, nativeCurrency, showFiat, totalInHex, gasUsed, isTokenApprove } = this.props
     return (
       <div className={classnames('transaction-breakdown', className)}>
         <div className="transaction-breakdown__title">
@@ -47,12 +48,14 @@ export default class TransactionBreakdown extends PureComponent {
             )
           }
         </TransactionBreakdownRow>
-        <TransactionBreakdownRow title={t('amount')}>
+        <TransactionBreakdownRow
-          <UserPreferencedCurrencyDisplay
+          title={
-            className="transaction-breakdown__value"
+            isTokenApprove
-            type={PRIMARY}
+              ? t('spendLimitAmount')
-            value={value}
+              : t('amount')
-          />
+          }
+        >
+          <span className="transaction-breakdown__value">{primaryCurrency}</span>
         </TransactionBreakdownRow>
         <TransactionBreakdownRow
           title={`${t('gasLimit')} (${t('units')})`}

ui/app/components/app/transaction-breakdown/transaction-breakdown.container.js

@@ -2,13 +2,15 @@ import { connect } from 'react-redux'
 import { getIsMainnet, getNativeCurrency, getPreferences } from '../../../selectors'
 import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util'
 import { sumHexes } from '../../../helpers/utils/transactions.util'
+import { TOKEN_METHOD_APPROVE } from '../../../helpers/constants/transactions'
 import TransactionBreakdown from './transaction-breakdown.component'
 
 const mapStateToProps = (state, ownProps) => {
-  const { transaction } = ownProps
+  const { transaction, transactionCategory } = ownProps
   const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
   const { showFiatInTestnets } = getPreferences(state)
   const isMainnet = getIsMainnet(state)
+  const isTokenApprove = transactionCategory === TOKEN_METHOD_APPROVE
 
   const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
 
@@ -21,8 +23,8 @@ const mapStateToProps = (state, ownProps) => {
     totalInHex,
     gas,
     gasPrice,
-    value,
     gasUsed,
+    isTokenApprove,
   }
 }
 

ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -31,6 +31,7 @@ export default class TransactionListItemDetails extends PureComponent {
     showRetry: PropTypes.bool,
     isEarliestNonce: PropTypes.bool,
     cancelDisabled: PropTypes.bool,
+    primaryCurrency: PropTypes.string,
     transactionGroup: PropTypes.object,
     title: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
@@ -143,6 +144,7 @@ export default class TransactionListItemDetails extends PureComponent {
     const { justCopied } = this.state
     const {
       transactionGroup,
+      primaryCurrency,
       showSpeedUp,
       showRetry,
       recipientEns,
@@ -155,7 +157,7 @@ export default class TransactionListItemDetails extends PureComponent {
       onClose,
       recipientNickname,
     } = this.props
-    const { primaryTransaction: transaction } = transactionGroup
+    const { primaryTransaction: transaction, initialTransaction: { transactionCategory } } = transactionGroup
     const { hash } = transaction
 
     return (
@@ -251,7 +253,9 @@ export default class TransactionListItemDetails extends PureComponent {
             <div className="transaction-list-item-details__cards-container">
               <TransactionBreakdown
                 nonce={transactionGroup.initialTransaction.txParams.nonce}
+                transactionCategory={transactionCategory}
                 transaction={transaction}
+                primaryCurrency={primaryCurrency}
                 className="transaction-list-item-details__transaction-breakdown"
               />
               <TransactionActivityLog

ui/app/components/app/transaction-list-item/index.scss

@@ -1,6 +1,8 @@
 .transaction-list-item {
   &__primary-currency {
     color: $Black-100;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__secondary-currency {

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -143,7 +143,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
         )}
         rightContent={!isSignatureReq && !isApproval && (
           <>
-            <h2 className="transaction-list-item__primary-currency">{primaryCurrency}</h2>
+            <h2 title={primaryCurrency} className="transaction-list-item__primary-currency">{primaryCurrency}</h2>
             <h3 className="transaction-list-item__secondary-currency">{secondaryCurrency}</h3>
           </>
         )}
@@ -158,6 +158,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
           title={title}
           onClose={toggleShowDetails}
           transactionGroup={transactionGroup}
+          primaryCurrency={primaryCurrency}
           senderAddress={senderAddress}
           recipientAddress={recipientAddress}
           onRetry={retryTransaction}

ui/app/hooks/useTokenDisplayValue.js

@@ -42,7 +42,7 @@ export function useTokenDisplayValue (transactionData, token, isTokenTransaction
       return null
     }
     const tokenValue = getTokenValueParam(tokenData)
-    return calcTokenAmount(tokenValue, token.decimals).toString()
+    return calcTokenAmount(tokenValue, token.decimals).toString(10)
   }, [shouldCalculateTokenValue, tokenData, token])
 
   return displayValue

ui/app/hooks/useTransactionDisplayData.js

@@ -153,6 +153,7 @@ export function useTransactionDisplayData (transactionGroup) {
     primarySuffix = primaryTransaction.sourceTokenSymbol
   } else if (transactionCategory === TOKEN_METHOD_APPROVE) {
     category = TRANSACTION_CATEGORY_APPROVAL
+    prefix = ''
     title = t('approveSpendLimit', [token?.symbol || t('token')])
     subtitle = origin
     subtitleContainsOrigin = true