fix: Added connections logic specific to dapp

ui/components/multichain/account-list-item/account-list-item.js

@@ -380,6 +380,7 @@ export const AccountListItem = ({
           disableAccountSwitcher={isSingleAccount}
           isOpen={accountOptionsMenuOpen}
           onActionClick={onActionClick}
+          activeTabOrigin={currentTabOrigin}
         />
       )}
     </Box>

ui/components/multichain/app-header/app-header.js

@@ -75,7 +75,7 @@ import { SEND_STAGES, getSendStage } from '../../../ducks/send';
 import Tooltip from '../../ui/tooltip';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { MINUTE } from '../../../../shared/constants/time';
-import { getURLHost, shortenAddress } from '../../../helpers/utils/util';
+import { shortenAddress } from '../../../helpers/utils/util';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 
 export const AppHeader = ({ location }) => {
@@ -175,9 +175,7 @@ export const AppHeader = ({ location }) => {
   }, [chainId, dispatch, trackEvent]);
 
   const handleConnectionsRoute = () => {
-    const hostName = getURLHost(origin);
-
-    history.push(`${CONNECTIONS}/${encodeURIComponent(hostName)}`);
+    history.push(`${CONNECTIONS}/${encodeURIComponent(origin)}`);
   };
   // This is required to ensure send and confirmation screens
   // look as desired

ui/components/multichain/connect-accounts-modal/connect-account-modal.types.ts

@@ -28,4 +28,5 @@ export type ConnectAccountsListProps = {
   accounts: AccountType[];
   checked: boolean;
   isIndeterminate: boolean;
+  activeTabOrigin: string;
 };

ui/components/multichain/connect-accounts-modal/connect-accounts-modal-list.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import {
   Box,
   ButtonPrimary,
@@ -24,7 +24,6 @@ import {
   TextColor,
 } from '../../../helpers/constants/design-system';
 import Tooltip from '../../ui/tooltip/tooltip';
-import { getOriginOfCurrentTab } from '../../../selectors/selectors';
 import { getURLHost } from '../../../helpers/utils/util';
 import { addMorePermittedAccounts } from '../../../store/actions';
 import { ConnectAccountsListProps } from './connect-account-modal.types';
@@ -40,9 +39,9 @@ export const ConnectAccountsModalList: React.FC<ConnectAccountsListProps> = ({
   checked,
   isIndeterminate,
   onAccountsUpdate,
+  activeTabOrigin,
 }) => {
   const t = useI18nContext();
-  const activeTabOrigin = useSelector(getOriginOfCurrentTab);
   const dispatch = useDispatch();
   return (
     <Modal isOpen onClose={onClose} data-testid="connect-more-accounts">

ui/components/multichain/connect-accounts-modal/connect-accounts-modal.test.tsx

@@ -14,6 +14,7 @@ const render = () => {
     allAreSelected: () => false,
     checked: false,
     isIndeterminate: false,
+    activeTabOrigin: 'metamask.github.io',
     accounts: [
       {
         address: '0x5Ab19e7091dD208F352F8E727B6DCC6F8aBB6275',

ui/components/multichain/connect-accounts-modal/connect-accounts-modal.tsx

@@ -6,9 +6,11 @@ import { ConnectAccountsModalList } from './connect-accounts-modal-list';
 export const ConnectAccountsModal = ({
   onClose,
   onAccountsUpdate,
+  activeTabOrigin,
 }: {
   onClose: () => void;
   onAccountsUpdate: () => void;
+  activeTabOrigin: string;
 }) => {
   const accounts = useSelector(getUnconnectedAccounts);
   const [selectedAccounts, setSelectedAccounts] = useState<string[]>([]);
@@ -65,6 +67,7 @@ export const ConnectAccountsModal = ({
       isIndeterminate={isIndeterminate}
       onClose={onClose}
       onAccountsUpdate={onAccountsUpdate}
+      activeTabOrigin={activeTabOrigin}
     />
   );
 };

ui/components/multichain/connected-accounts-menu/connected-accounts-menu.test.tsx

@@ -25,6 +25,7 @@ const DEFAULT_PROPS = {
   disableAccountSwitcher: false,
   closeMenu: jest.fn(),
   onActionClick: jest.fn(),
+  activeTabOrigin: 'metamask.github.io',
 };
 
 const renderComponent = (props = {}, stateChanges = {}) => {

ui/components/multichain/connected-accounts-menu/connected-accounts-menu.tsx

@@ -20,10 +20,7 @@ import {
   removePermittedAccount,
   setSelectedAccount,
 } from '../../../store/actions';
-import {
-  getOriginOfCurrentTab,
-  getPermissionsForActiveTab,
-} from '../../../selectors';
+import { getPermissionsForActiveTab } from '../../../selectors';
 import { PermissionDetailsModal } from '../permission-details-modal/permission-details-modal';
 import { Identity } from './connected-accounts-menu.types';
 
@@ -39,6 +36,7 @@ export const ConnectedAccountsMenu = ({
   onClose,
   closeMenu,
   onActionClick,
+  activeTabOrigin,
 }: {
   isOpen: boolean;
   identity: Identity;
@@ -47,8 +45,8 @@ export const ConnectedAccountsMenu = ({
   onClose: () => void;
   closeMenu: () => void;
   onActionClick: (message: string) => void;
+  activeTabOrigin: string;
 }) => {
-  const activeTabOrigin = useSelector(getOriginOfCurrentTab);
   const dispatch = useDispatch();
   const t = useI18nContext();
   const popoverDialogRef = useRef<HTMLDivElement | null>(null);

ui/components/multichain/pages/connections/connections.test.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Router, Route } from 'react-router-dom'; // Import Router and Route
+import { createMemoryHistory } from 'history';
 import {
   fireEvent,
   renderWithProvider,
@@ -86,26 +88,46 @@ describe('Connections Content', () => {
   });
 
   it('should render correctly', () => {
+    const history = createMemoryHistory();
+    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
+
     const { container, getByTestId } = renderWithProvider(
-      <Connections />,
+      <Router history={history}>
+        <Route path="/connect/:origin">
+          <Connections />
+        </Route>
+      </Router>,
       connectedStore,
     );
     expect(container).toMatchSnapshot();
     expect(getByTestId('connections-page')).toBeInTheDocument();
   });
 
-  it('it should render title of the dapp correctly', () => {
-    const { getByText } = renderWithProvider(<Connections />, connectedStore);
-    expect(getByText('metamask.github.io')).toBeInTheDocument();
-  });
-
   it('it should render Disconnect all Account button of the page', () => {
-    const { getByText } = renderWithProvider(<Connections />, connectedStore);
+    const history = createMemoryHistory();
+    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
+
+    const { getByText } = renderWithProvider(
+      <Router history={history}>
+        <Route path="/connect/:origin">
+          <Connections />
+        </Route>
+      </Router>,
+      connectedStore,
+    );
     expect(getByText('Disconnect all accounts')).toBeInTheDocument();
   });
+
   it('it should trigger disconnect all accounts modal flow when disconnect all accounts button is clicked', async () => {
+    const history = createMemoryHistory();
+    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
+
     const { getByText, getByTestId } = renderWithProvider(
-      <Connections />,
+      <Router history={history}>
+        <Route path="/connect/:origin">
+          <Connections />
+        </Route>
+      </Router>,
       connectedStore,
     );
 

ui/components/multichain/pages/connections/connections.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { NonEmptyArray } from '@metamask/utils';
 import {
   AlignItems,
@@ -22,8 +22,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   getConnectedSitesList,
   getInternalAccounts,
-  getOrderedConnectedAccountsForActiveTab,
-  getOriginOfCurrentTab,
+  getOrderedConnectedAccountsForConnectedDapp,
   getPermissionSubjects,
   getPermittedAccountsByOrigin,
   getSelectedAccount,
@@ -87,7 +86,10 @@ export const Connections = () => {
     setShowDisconnectedAllAccountsUpdatedToast,
   ] = useState(false);
 
-  const activeTabOrigin: string = useSelector(getOriginOfCurrentTab);
+  const urlParams: { origin: string } = useParams();
+  const securedOrigin = decodeURIComponent(urlParams.origin);
+
+  const activeTabOrigin: string = securedOrigin;
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const subjectMetadata: { [key: string]: any } = useSelector(
@@ -102,8 +104,8 @@ export const Connections = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { id } = useSelector((state: any) => state.activeTab);
 
-  const connectedAccounts = useSelector(
-    getOrderedConnectedAccountsForActiveTab,
+  const connectedAccounts = useSelector((state) =>
+    getOrderedConnectedAccountsForConnectedDapp(state, activeTabOrigin),
   );
   const selectedAccount = useSelector(getSelectedAccount);
   const internalAccounts = useSelector(getInternalAccounts);
@@ -224,7 +226,7 @@ export const Connections = () => {
             textAlign={TextAlign.Center}
             ellipsis
           >
-            {getURLHost(activeTabOrigin)}
+            {getURLHost(securedOrigin)}
           </Text>
         </Box>
       </Header>
@@ -272,6 +274,7 @@ export const Connections = () => {
           <ConnectAccountsModal
             onClose={() => setShowConnectAccountsModal(false)}
             onAccountsUpdate={() => setShowConnectedAccountsUpdatedToast(true)}
+            activeTabOrigin={activeTabOrigin}
           />
         ) : null}
         {showDisconnectAllModal ? (

ui/components/multichain/pages/permissions-page/permissions-page.js

@@ -34,7 +34,6 @@ import {
 } from '../../../../selectors';
 import { Tab, Tabs } from '../../../ui/tabs';
 import { ProductTour } from '../../product-tour-popover';
-import { getURLHost } from '../../../../helpers/utils/util';
 import { hidePermissionsTour } from '../../../../store/actions';
 import { ConnectionListItem } from './connection-list-item';
 
@@ -68,7 +67,7 @@ export const PermissionsPage = () => {
   }, [totalConnections, sitesConnectionsList, snapsConnectionsList]);
 
   const handleConnectionClick = (connection) => {
-    const hostName = getURLHost(connection.origin);
+    const hostName = connection.origin;
     const safeEncodedHost = encodeURIComponent(hostName);
     history.push(`${CONNECTIONS}/${safeEncodedHost}`);
   };

ui/selectors/permissions.js

@@ -73,6 +73,10 @@ export function getPermittedAccountsForCurrentTab(state) {
   return getPermittedAccounts(state, getOriginOfCurrentTab(state));
 }
 
+export function getPermittedAccountsForSelectedTab(state, activeTab) {
+  return getPermittedAccounts(state, activeTab);
+}
+
 /**
  * Returns a map of permitted accounts by origin for all origins.
  *
@@ -137,7 +141,10 @@ export function getConnectedSubjectsForAllAddresses(state) {
       if (!accountsToConnections[address]) {
         accountsToConnections[address] = [];
       }
-      accountsToConnections[address].push(subjectMetadata[subjectKey] || {});
+      const metadata = subjectMetadata[subjectKey];
+      if (metadata) {
+        accountsToConnections[address].push(metadata);
+      }
     });
   });
 
@@ -313,6 +320,44 @@ export function getOrderedConnectedAccountsForActiveTab(state) {
     );
 }
 
+export function getOrderedConnectedAccountsForConnectedDapp(state, activeTab) {
+  const {
+    metamask: { permissionHistory },
+  } = state;
+
+  const permissionHistoryByAccount =
+    // eslint-disable-next-line camelcase
+    permissionHistory[activeTab.origin]?.eth_accounts?.accounts;
+  const orderedAccounts = getMetaMaskAccountsOrdered(state);
+  const connectedAccounts = getPermittedAccountsForSelectedTab(
+    state,
+    activeTab,
+  );
+
+  return orderedAccounts
+    .filter((account) => connectedAccounts.includes(account.address))
+    .map((account) => ({
+      ...account,
+      metadata: {
+        ...account.metadata,
+        lastActive: permissionHistoryByAccount?.[account.address],
+      },
+    }))
+    .sort(
+      ({ lastSelected: lastSelectedA }, { lastSelected: lastSelectedB }) => {
+        if (lastSelectedA === lastSelectedB) {
+          return 0;
+        } else if (lastSelectedA === undefined) {
+          return 1;
+        } else if (lastSelectedB === undefined) {
+          return -1;
+        }
+
+        return lastSelectedB - lastSelectedA;
+      },
+    );
+}
+
 export function getPermissionsForActiveTab(state) {
   const { activeTab, metamask } = state;
   const { subjects = {} } = metamask;