various fixes to transaction list (#8673)

ui/app/components/app/transaction-activity-log/transaction-activity-log.component.js

@@ -118,6 +118,10 @@ export default class TransactionActivityLog extends PureComponent {
     const { t } = this.context
     const { className, activities } = this.props
 
+    if (activities.length === 0) {
+      return null
+    }
+
     return (
       <div className={classnames('transaction-activity-log', className)}>
         <div className="transaction-activity-log__title">

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

@@ -35,12 +35,12 @@ export default class TransactionListItemDetails extends PureComponent {
     title: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     recipientEns: PropTypes.string,
-    recipientAddress: PropTypes.string.isRequired,
+    recipientAddress: PropTypes.string,
     rpcPrefs: PropTypes.object,
     senderAddress: PropTypes.string.isRequired,
     tryReverseResolveAddress: PropTypes.func.isRequired,
     senderNickname: PropTypes.string.isRequired,
-    recipientNickname: PropTypes.string.isRequired,
+    recipientNickname: PropTypes.string,
   }
 
   state = {
@@ -95,10 +95,12 @@ export default class TransactionListItemDetails extends PureComponent {
     })
   }
 
-  async componentDidMount () {
+  componentDidMount () {
     const { recipientAddress, tryReverseResolveAddress } = this.props
 
-    tryReverseResolveAddress(recipientAddress)
+    if (recipientAddress) {
+      tryReverseResolveAddress(recipientAddress)
+    }
   }
 
   renderCancel () {

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

@@ -10,8 +10,11 @@ const mapStateToProps = (state, ownProps) => {
     ensResolutionsByAddress,
   } = metamask
   const { recipientAddress, senderAddress } = ownProps
-  const address = checksumAddress(recipientAddress)
-  const recipientEns = ensResolutionsByAddress[address] || ''
+  let recipientEns
+  if (recipientAddress) {
+    const address = checksumAddress(recipientAddress)
+    recipientEns = ensResolutionsByAddress[address] || ''
+  }
   const addressBook = getAddressBook(state)
 
   const getNickName = (address) => {
@@ -26,7 +29,7 @@ const mapStateToProps = (state, ownProps) => {
     rpcPrefs,
     recipientEns,
     senderNickname: getNickName(senderAddress),
-    recipientNickname: getNickName(recipientAddress),
+    recipientNickname: recipientAddress ? getNickName(recipientAddress) : null,
   }
 }
 

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

@@ -13,7 +13,7 @@ import { useCancelTransaction } from '../../../hooks/useCancelTransaction'
 import { useRetryTransaction } from '../../../hooks/useRetryTransaction'
 import Button from '../../ui/button'
 import Tooltip from '../../ui/tooltip'
-import TransactionListItemDetails from '../transaction-list-item-details/transaction-list-item-details.component'
+import TransactionListItemDetails from '../transaction-list-item-details'
 import { useHistory } from 'react-router-dom'
 import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes'
 import {

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

@@ -112,7 +112,7 @@ export default function TransactionList ({ tokenAddress }) {
                 </div>
               )
           }
-          {(completedTransactions.length - limit + PAGE_INCREMENT) > 0 && (
+          {completedTransactions.length > limit && (
             <Button className="transaction-list__view-more" type="secondary" rounded onClick={viewMore}>View More</Button>
           )}
         </div>