[MMI] Adds custodian icon next to metafox (#18851)

* Finished adding custodian icon next to metafox

* Fixed image path

* Fixed comments in PR

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

@@ -37,6 +37,9 @@ export default class AppHeader extends PureComponent {
     showBetaHeader: PropTypes.bool,
     ///: END:ONLY_INCLUDE_IN
     onClick: PropTypes.func,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    custodianIcon: PropTypes.string,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   static contextTypes = {
@@ -132,6 +135,10 @@ export default class AppHeader extends PureComponent {
       ///: BEGIN:ONLY_INCLUDE_IN(desktop)
       desktopEnabled,
       ///: END:ONLY_INCLUDE_IN
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      custodianIcon,
+      isUnlocked,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
 
     return (
@@ -152,6 +159,10 @@ export default class AppHeader extends PureComponent {
                 }
                 history.push(DEFAULT_ROUTE);
               }}
+              ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+              custodyImgSrc={custodianIcon}
+              isUnlocked={isUnlocked}
+              ///: END:ONLY_INCLUDE_IN
             />
             {
               ///: BEGIN:ONLY_INCLUDE_IN(desktop)

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

@@ -1,6 +1,9 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
+///: END:ONLY_INCLUDE_IN
 import {
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   getUnreadNotificationsCount,
@@ -25,6 +28,12 @@ const mapStateToProps = (state) => {
     ///: END:ONLY_INCLUDE_IN
   } = metamask;
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const custodianIcon = selectedAddress
+    ? getCustodianIconForAddress(state, selectedAddress)
+    : null;
+  ///: END:ONLY_INCLUDE_IN
+
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   const unreadNotificationsCount = getUnreadNotificationsCount(state);
   ///: END:ONLY_INCLUDE_IN
@@ -47,6 +56,9 @@ const mapStateToProps = (state) => {
     ///: BEGIN:ONLY_INCLUDE_IN(build-beta)
     showBetaHeader,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    custodianIcon,
+    ///: END:ONLY_INCLUDE_IN
   };
 };
 

ui/components/app/app-header/index.scss

@@ -34,6 +34,20 @@
     }
   }
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  &__custody-logo {
+    &--icon {
+      height: 16px;
+      margin-left: 15px;
+      margin-top: 4px;
+
+      @media screen and (min-width: $break-large) {
+        display: none;
+      }
+    }
+  }
+  ///: END:ONLY_INCLUDE_IN
+
   &__contents {
     display: flex;
     flex-flow: row nowrap;

ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap

@@ -1,5 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
+<div>
+  <div
+    class="app-header__logo-container"
+    data-testid="app-header-logo"
+  >
+    <div />
+    <img
+      alt=""
+      class="app-header__metafox-logo--icon"
+      height="42"
+      src="./images/logo/metamask-fox.svg"
+      width="42"
+    />
+    <img
+      alt=""
+      class="app-header__custody-logo app-header__custody-logo--icon"
+      height="42"
+      src="/test"
+      width="42"
+    />
+  </div>
+</div>
+`;
+
 exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
 <div>
   <div

ui/components/ui/metafox-logo/metafox-logo.component.js

@@ -11,12 +11,32 @@ export default class MetaFoxLogo extends PureComponent {
     ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
     src: PropTypes.string,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    custodyImgSrc: PropTypes.string,
+    isUnlocked: PropTypes.bool,
+    ///: END:ONLY_INCLUDE_IN
   };
 
   static defaultProps = {
     onClick: undefined,
   };
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  renderCustodyIcon(iconProps, custodyImgSrc) {
+    return (
+      <img
+        {...iconProps}
+        src={custodyImgSrc}
+        className={classnames(
+          'app-header__custody-logo',
+          'app-header__custody-logo--icon',
+        )}
+        alt=""
+      />
+    );
+  }
+  ///: END:ONLY_INCLUDE_IN
+
   render() {
     const {
       onClick,
@@ -25,9 +45,19 @@ export default class MetaFoxLogo extends PureComponent {
       ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
       src,
       ///: END:ONLY_INCLUDE_IN
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      custodyImgSrc,
+      isUnlocked,
+      ///: END:ONLY_INCLUDE_IN
     } = this.props;
     const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 };
 
+    iconProps.src = './images/logo/metamask-fox.svg';
+
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    iconProps.src = './build-types/mmi/images/logo/mmi-logo-with-words.svg';
+    ///: END:ONLY_INCLUDE_IN
+
     let renderHorizontalLogo = () => (
       <MetaFoxHorizontalLogo
         className={classnames({
@@ -78,6 +108,13 @@ export default class MetaFoxLogo extends PureComponent {
           })}
           alt=""
         />
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+          custodyImgSrc &&
+            isUnlocked &&
+            this.renderCustodyIcon(iconProps, custodyImgSrc)
+          ///: END:ONLY_INCLUDE_IN
+        }
       </div>
     );
   }

ui/components/ui/metafox-logo/metafox-logo.component.test.js

@@ -19,4 +19,12 @@ describe('MetaFoxLogo', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('does match snapshot with custodyImgSrc', () => {
+    const { container } = renderWithProvider(
+      <MetaFoxLogo custodyImgSrc="/test" isUnlocked />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });