Handle connected accounts with no last active time (#8746)

The "Connected accounts" modal was throwing an exception when
attempting to render an account that has no `lastActive` time. The
component and related selector has been updated to no longer expect
the `lastActive` time to be set.

Prior to #8653 there was a guarantee that all connected accounts had a
`lastActive` time set, as the time would be set on any account returned
from the `eth_requestAccounts` call. But after #8653 only the primary
account was returned, so only the primary account had a `lastActive`
time set.

Fixes #8733

ui/app/components/app/connected-accounts-list/connected-accounts-list-item/connected-accounts-list-item.component.js

@@ -42,9 +42,15 @@ export default class ConnectedAccountsListItem extends PureComponent {
             <p>
               <strong className="connected-accounts-list__account-name">{name}</strong>
             </p>
-            <p className="connected-accounts-list__account-status">
-              {status}
-            </p>
+            {
+              status
+                ? (
+                  <p className="connected-accounts-list__account-status">
+                    {status}
+                  </p>
+                )
+                : null
+            }
           </div>
         </div>
         {options}

ui/app/components/app/connected-accounts-list/connected-accounts-list.component.js

@@ -24,7 +24,7 @@ export default class ConnectedAccountsList extends PureComponent {
     connectedAccounts: PropTypes.arrayOf(PropTypes.shape({
       address: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
-      lastActive: PropTypes.number.isRequired,
+      lastActive: PropTypes.number,
     })).isRequired,
     permissions: PropTypes.arrayOf(PropTypes.shape({
       key: PropTypes.string.isRequired,
@@ -97,38 +97,49 @@ export default class ConnectedAccountsList extends PureComponent {
       <>
         <main className="connected-accounts-list">
           {this.renderUnconnectedAccount()}
-          {connectedAccounts.map(({ address, name, lastActive }, index) => (
-            <ConnectedAccountsListItem
-              key={address}
-              address={address}
-              name={`${name} (…${address.substr(-4, 4)})`}
-              status={index === 0 ? t('primary') : `${t('lastActive')}: ${DateTime.fromMillis(lastActive).toISODate()}`}
-              options={(
-                <ConnectedAccountsListOptions
-                  onHideOptions={this.hideAccountOptions}
-                  onShowOptions={this.showAccountOptions.bind(null, address)}
-                  show={accountWithOptionsShown === address}
-                >
-                  {
-                    address === selectedAddress ? null : (
+          {
+            connectedAccounts.map(({ address, name, lastActive }, index) => {
+              let status
+              if (index === 0) {
+                status = t('primary')
+              } else if (lastActive) {
+                status = `${t('lastActive')}: ${DateTime.fromMillis(lastActive).toISODate()}`
+              }
+
+              return (
+                <ConnectedAccountsListItem
+                  key={address}
+                  address={address}
+                  name={`${name} (…${address.substr(-4, 4)})`}
+                  status={status}
+                  options={(
+                    <ConnectedAccountsListOptions
+                      onHideOptions={this.hideAccountOptions}
+                      onShowOptions={this.showAccountOptions.bind(null, address)}
+                      show={accountWithOptionsShown === address}
+                    >
+                      {
+                        address === selectedAddress ? null : (
+                          <MenuItem
+                            iconClassName="fas fa-random"
+                            onClick={this.switchAccount}
+                          >
+                            {t('switchToThisAccount')}
+                          </MenuItem>
+                        )
+                      }
                       <MenuItem
-                        iconClassName="fas fa-random"
-                        onClick={this.switchAccount}
+                        iconClassName="disconnect-icon"
+                        onClick={this.disconnectAccount}
                       >
-                        {t('switchToThisAccount')}
+                        {t('disconnectThisAccount')}
                       </MenuItem>
-                    )
-                  }
-                  <MenuItem
-                    iconClassName="disconnect-icon"
-                    onClick={this.disconnectAccount}
-                  >
-                    {t('disconnectThisAccount')}
-                  </MenuItem>
-                </ConnectedAccountsListOptions>
-              )}
-            />
-          ))}
+                    </ConnectedAccountsListOptions>
+                  )}
+                />
+              )
+            })
+          }
         </main>
         <ConnectedAccountsListPermissions permissions={permissions} />
       </>

ui/app/selectors/permissions.js

@@ -222,7 +222,7 @@ export function getOrderedConnectedAccountsForActiveTab (state) {
     .filter((account) => connectedAccounts.includes(account.address))
     .map((account) => ({
       ...account,
-      lastActive: permissionsHistoryByAccount[account.address],
+      lastActive: permissionsHistoryByAccount?.[account.address],
     }))
     .sort(({ lastSelected: lastSelectedA }, { lastSelected: lastSelectedB }) => {
       if (lastSelectedA === lastSelectedB) {