UX Multichain: Added connections page

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

@@ -14,6 +14,7 @@ import {
   BUILD_QUOTE_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONNECTED_ACCOUNTS_ROUTE,
+  CONNECTIONS,
   DEFAULT_ROUTE,
   SWAPS_ROUTE,
 } from '../../../helpers/constants/routes';
@@ -75,7 +76,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 { shortenAddress } from '../../../helpers/utils/util';
+import { getURLHost, shortenAddress } from '../../../helpers/utils/util';
 
 export const AppHeader = ({ location }) => {
   const trackEvent = useContext(MetaMetricsContext);
@@ -173,6 +174,11 @@ export const AppHeader = ({ location }) => {
     });
   }, [chainId, dispatch, trackEvent]);
 
+  const handleConnectionsRoute = () => {
+    const hostName = getURLHost(origin);
+
+    history.push(`${CONNECTIONS}/${encodeURIComponent(hostName)}`);
+  };
   // This is required to ensure send and confirmation screens
   // look as desired
   const headerBottomMargin = !popupStatus && disableNetworkPicker ? 4 : 0;
@@ -364,11 +370,16 @@ export const AppHeader = ({ location }) => {
                     <Box ref={menuRef}>
                       <ConnectedStatusIndicator
                         onClick={() => {
-                          history.push(CONNECTED_ACCOUNTS_ROUTE);
-                          trackEvent({
-                            event: MetaMetricsEventName.NavConnectedSitesOpened,
-                            category: MetaMetricsEventCategory.Navigation,
-                          });
+                          if (process.env.MULTICHAIN) {
+                            handleConnectionsRoute();
+                          } else {
+                            history.push(CONNECTED_ACCOUNTS_ROUTE);
+                            trackEvent({
+                              event:
+                                MetaMetricsEventName.NavConnectedSitesOpened,
+                              category: MetaMetricsEventCategory.Navigation,
+                            });
+                          }
                         }}
                       />
                     </Box>

ui/components/multichain/pages/connections/components/__snapshots__/no-connections.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`No Connections Content should render correctly 1`] = `
+<div>
+  <div
+    class="mm-box connections-page__no-site-connected-content mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-md-medium mm-text--text-align-center mm-box--color-text-default"
+    >
+      MetaMask isn’t connected to this site
+    </p>
+    <p
+      class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--color-text-default"
+    >
+      Select an account you want to use on this site to continue.
+    </p>
+  </div>
+</div>
+`;

ui/components/multichain/pages/connections/components/no-connection.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  AlignItems,
+  Display,
+  FlexDirection,
+  JustifyContent,
+  TextAlign,
+  TextVariant,
+} from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { Box, Text } from '../../../../component-library';
+
+export const NoConnectionContent = () => {
+  const t = useI18nContext();
+  return (
+    <Box
+      className="connections-page__no-site-connected-content"
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      gap={2}
+      paddingLeft={4}
+      paddingRight={4}
+    >
+      <Text variant={TextVariant.bodyMdMedium} textAlign={TextAlign.Center}>
+        {t('noConnectedAccountTitle')}
+      </Text>
+
+      <Text variant={TextVariant.bodyMd} textAlign={TextAlign.Center}>
+        {t('noConnectedAccountDescription')}
+      </Text>
+    </Box>
+  );
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { renderWithProvider } from '../../../../../../test/jest';
+import {NoConnectionContent} from './no-connection';
+
+describe('No Connections Content', () => {
+  const render = () => {
+
+    return renderWithProvider(
+      <NoConnectionContent />
+    );
+  };
+  it('should render correctly', () => {
+    const { container } = render();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import {
+  AlignItems,
+  BackgroundColor,
+  Display,
+  IconColor,
+  JustifyContent,
+  TextAlign,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes';
+import { getURLHost } from '../../../../helpers/utils/util';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import {
+  getConnectedSitesList,
+  getOriginOfCurrentTab,
+} from '../../../../selectors';
+import {
+  AvatarFavicon,
+  AvatarFaviconSize,
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  ButtonPrimary,
+  ButtonPrimarySize,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../../component-library';
+import { Content, Footer, Header, Page } from '../page';
+import { NoConnectionContent } from './components/no-connection';
+
+export const Connections = () => {
+  const t = useI18nContext();
+  const history = useHistory();
+  const activeTabOrigin = useSelector(getOriginOfCurrentTab);
+  const subjectMetadata: { [key: string]: any } = useSelector(
+    getConnectedSitesList,
+  );
+  const connectedSubjectsMetadata = subjectMetadata[activeTabOrigin];
+  return (
+    <Page data-testid="connections-page" className="connections-page">
+      <Header
+        backgroundColor={BackgroundColor.backgroundDefault}
+        startAccessory={
+          <ButtonIcon
+            ariaLabel={t('back')}
+            iconName={IconName.ArrowLeft}
+            className="connections-header__start-accessory"
+            color={IconColor.iconDefault}
+            onClick={() => history.push(DEFAULT_ROUTE)}
+            size={ButtonIconSize.Sm}
+          />
+        }
+      >
+        <Box
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          gap={2}
+          justifyContent={JustifyContent.center}
+          className="connections-header__title"
+        >
+          {connectedSubjectsMetadata?.iconUrl ? (
+            <AvatarFavicon
+              name={connectedSubjectsMetadata.name}
+              size={AvatarFaviconSize.Sm}
+              src={connectedSubjectsMetadata.iconUrl}
+            />
+          ) : (
+            <Icon
+              name={IconName.Global}
+              size={IconSize.Sm}
+              color={IconColor.iconDefault}
+            />
+          )}
+          <Text
+            as="span"
+            variant={TextVariant.headingMd}
+            textAlign={TextAlign.Center}
+            ellipsis
+          >
+            {getURLHost(activeTabOrigin)}
+          </Text>
+        </Box>
+      </Header>
+      <Content>
+        {/* TODO: Replace null When accounts connected - create a separate component - Separate Ticket */}
+
+        {connectedSubjectsMetadata ? null : <NoConnectionContent />}
+      </Content>
+      <Footer>
+        {/* TODO: When accounts connected - Two Separate Buttons - Separate Ticket */}
+
+        <ButtonPrimary size={ButtonPrimarySize.Lg} block>
+          {t('connectAccounts')}
+        </ButtonPrimary>
+      </Footer>
+    </Page>
+  );
+};

ui/components/multichain/pages/connections/index.scss

@@ -0,0 +1,5 @@
+.connections-page {
+  &__no-site-connected-content {
+    height: 100%; //Box Props doesn't have height as a utility prop
+  }
+}

ui/components/multichain/pages/index.scss

@@ -1,3 +1,4 @@
 @import 'page/';
 @import 'send/';
+@import 'connections/';
 @import 'permissions-page/permissions-page';

ui/pages/routes/routes.component.js

@@ -378,7 +378,10 @@ export default class Routes extends Component {
           ///: END:ONLY_INCLUDE_IF
         }
         {process.env.MULTICHAIN && (
-          <Authenticated path={CONNECTIONS} component={Connections} />
+          <Authenticated
+            path={`${CONNECTIONS}/:origin`}
+            component={Connections}
+          />
         )}
         {process.env.MULTICHAIN && (
           <Authenticated path={PERMISSIONS} component={PermissionsPage} exact />
@@ -484,6 +487,17 @@ export default class Routes extends Component {
       return true;
     }
 
+    const isConnectionsPage = Boolean(
+      matchPath(location.pathname, {
+        path: CONNECTIONS,
+        exact: false,
+      }),
+    );
+
+    if (isConnectionsPage) {
+      return true;
+    }
+
     if (windowType === ENVIRONMENT_TYPE_POPUP && this.onConfirmPage()) {
       return true;
     }