Fix MetaMask#682 - Show connected app favicon in bottom bar (MetaMask…

…#20636)
Gudahtt · Sep 7, 2023 · 2a32936 · 2a32936
1 parent 5351ac7
commit 2a32936
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 12 deletions.
diff --git a/ui/components/multichain/app-footer/app-footer.js b/ui/components/multichain/app-footer/app-footer.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   CONNECTED_ROUTE,
   DEFAULT_ROUTE,
 } from '../../../helpers/constants/routes';
 import {
+  AvatarFavicon,
+  AvatarNetwork,
+  AvatarNetworkSize,
+  BadgeWrapper,
   Box,
   ButtonIcon,
   ButtonIconSize,
@@ -19,14 +23,23 @@ import {
   AlignItems,
   BackgroundColor,
   BlockSize,
+  BorderColor,
   BorderRadius,
   Display,
   FlexDirection,
   IconColor,
   JustifyContent,
+  Size,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import {
+  getConnectedSubjectsForAllAddresses,
+  getCurrentNetwork,
+  getOriginOfCurrentTab,
+  getSelectedAddress,
+  getTestNetworkBackgroundColor,
+} from '../../../selectors';
 import { showSelectActionModal } from './app-footer-actions';
 
 export const AppFooter = () => {
@@ -39,6 +52,20 @@ export const AppFooter = () => {
   const activeWallet = location.pathname === DEFAULT_ROUTE;
   const activeConnections = location.pathname === CONNECTED_ROUTE;
 
+  const selectedAddress = useSelector(getSelectedAddress);
+
+  const currentTabOrigin = useSelector(getOriginOfCurrentTab);
+  const connectedSites = useSelector(getConnectedSubjectsForAllAddresses);
+  const connectedSite = connectedSites[selectedAddress]?.find(
+    ({ origin }) => origin === currentTabOrigin,
+  );
+  const connectedAvatar = connectedSite?.iconUrl;
+  const connectedAvatarName = connectedSite?.name;
+
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+
+  const currentChain = useSelector(getCurrentNetwork);
+
   return (
     <Box
       className="app-footer"
@@ -113,16 +140,40 @@ export const AppFooter = () => {
         alignItems={AlignItems.center}
         tabIndex={0}
       >
-        <Icon
-          data-testid="app-footer-connections-button"
-          color={
-            activeConnections
-              ? IconColor.primaryDefault
-              : IconColor.iconAlternative
-          }
-          name={IconName.Global}
-          size={IconSize.Lg}
-        />
+        {connectedSite ? (
+          <Box alignItems={AlignItems.center}>
+            <BadgeWrapper
+              display={Display.Flex}
+              className="app-footer__connected-badge"
+              badge={
+                <AvatarNetwork
+                  backgroundColor={testNetworkBackgroundColor}
+                  size={AvatarNetworkSize.Xs}
+                  name={currentChain.nickname}
+                  src={currentChain.rpcPrefs?.imageUrl}
+                  borderWidth={2}
+                  borderColor={BorderColor.borderDefault}
+                />
+              }
+            >
+              <AvatarFavicon
+                size={Size.SM}
+                src={connectedAvatar}
+                name={connectedAvatarName}
+              />
+            </BadgeWrapper>
+          </Box>
+        ) : (
+          <Icon
+            color={
+              activeConnections
+                ? IconColor.primaryDefault
+                : IconColor.iconAlternative
+            }
+            name={IconName.Global}
+            size={IconSize.Lg}
+          />
+        )}
         <Text
           color={
             activeConnections

diff --git a/ui/components/multichain/app-footer/app-footer.stories.js b/ui/components/multichain/app-footer/app-footer.stories.js
@@ -1,9 +1,50 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import testData from '../../../../.storybook/test-data';
+import configureStore from '../../../store/store';
 import { AppFooter } from '.';
 
+const customNetworkData = {
+  ...testData,
+  activeTab: {
+    id: 1111,
+    title: 'Uniswap',
+    origin: 'https://app.uniswap.org',
+    protocol: 'https:',
+    url: 'https://app.uniswap.org/',
+  },
+  metamask: {
+    ...testData.metamask,
+    providerConfig: {
+      chainId: '0x1',
+    },
+    selectedAddress: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+    subjectMetadata: {
+      ...testData.metamask.subjectMetadata,
+      'https://app.uniswap.org': {
+        extensionId: null,
+        iconUrl: 'https://app.uniswap.org/favicon.png',
+        name: 'Uniswap',
+        origin: 'https://app.uniswap.org',
+        subjectType: 'website',
+      },
+    },
+  },
+};
+const customNetworkStore = configureStore(customNetworkData);
+
 export default {
   title: 'Components/Multichain/AppFooter',
 };
 export const DefaultStory = () => <AppFooter />;
-
 DefaultStory.storyName = 'Default';
+
+export const ConnectedStory = () => <AppFooter />;
+ConnectedStory.storyName = 'Connected';
+ConnectedStory.decorators = [
+  (Story) => (
+    <Provider store={customNetworkStore}>
+      <Story />
+    </Provider>
+  ),
+];